Yugal Router

By routing pages you can easily navigate between methods with custom urls. This requires some additional configurations.

  • Paste the code below in your .htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php [L,QSA]

Edit file extension of index.php in .htaccess according to your project.

  • You need to pass uri parameter in page methods for custom urls. Example for Defining URI parameter in Page Method

    function HomePage(){
        return{
            render: `<h1>HELLO WORLD</h1>`,
            uri: 'home.html' //THIS WILL BE CUSTOM PAGE NAME FOR URLS
        };
    }

HOW TO USE yugal.router?

yugal.router must be called after the page is completely loaded, so that there is no error. For this addEventListener must be used. Example

    window.addEventListener("load", ()=>{
        yugal.router();
    });

However in above example, blank parameter could cause some error, so this code will not work, refer to examples below.

USAGE

yugal.router accepts an object as parameter, with initial, error404 and screens as parameters.

  • initial: accepts the page method which must be renderred if no pointed page is defined in URL

  • error404: accepts the page method which must be renderred when router can't find any page method with URI parameter which is called by URL. (OPTIONAL)

  • screens: accepts an array of all page methods.

Example

    function ErrorPage(){
        return{
            render: `<h1>ERROR!</h1>`
        };
    }
    function AboutPage(){
        return{
            render: `<h1>ABOUT PAGE</h1>`,
            uri: 'about'
        };
    }
    function HomePage(){
        return{
            render: `<h1>HELLO WORLD</h1>`,
            uri: 'index'
        };
    }
    window.addEventListener("load", ()=>{
        yugal.router({
            initial: ()=>HomePage(),
            error404: ()=>ErrorPage(),
            screens: [
                HomePage,
                AboutPage
            ]
        });
    });

Don't use yugal.navigate barely to initially render a method, as this is handled by yugal.router itself.

yugal.router MUST BE RAN ONLY ONCE IN WHOLE PROJECT

Last updated

Was this helpful?