Router

The route system is already embedded in WinnetouJs and is responsible for creating dynamic routes on the frontend and making accessible the return of the physical button of the smartphones and returns of the browsers. To use, the first thing to do is define the routes in the createRoutes method.

Creating router

Routes receive functions that are called when the route is accessed by Winnetou.navigate() and Winnetou.pass(), returning the route and the parameters passed to the function. Be carefull when usign it cause modern browser don't allow to use history before first user interaction. Be careful when using it cause modern browser don't allow to use history before first user interaction. See https://developer.chrome.com/blog/user-activation to depper dive.

  
Winnetou.createRoutes({
        "/": () => {
            this.render()
        },
        "/profiles/:user": user => this.profile(user),
        // pass method
        "menu": () => this.menu()
    },
    {
        onBack: (route) => {
            console.log(
                "This will be triggered when user press back button", route
            );
        },
        onGo: (route) => {
            console.log(
                "This will be triggered when user go to a route", route
            );
        },
    }
);
       
      

Winnetou.navigate()

It is responsible for accessing the route function and changing the browser URL. Winnetou.navigate("/profile/John");

Winnetou.pass()

Sometimes we want to set up a screen or a menu but we don't want to change the url, but we want to be able to return with the click of the physical button, for that we have to use the pass(); The pass method also accepts parameters like navigate. The difference between pass and navigate is that navigate starts with a / and pass don't.

        
Winnetou.createRoutes({
    // navigate route
    "/": () => {
        this.render()
    },

    //navigate route
    "/profiles/:user": user => this.profile(user),

    // pass route
    menu: () => this.menu(),

    // here we are creating a pass route
    "userMenu/:user" : user => this.userMenu(user)
    }
)

//and calling pass route
Winnetou.pass("menu");
Winnetou.pass(`userMenu/${login}`);
       
      

Using URL parameters

Winnetou router supports multiple route parameters in the url, just configure them correctly in the create routes and pass the parameters to the function.

        

// configure the route and pass the parameters to the function
"/profile/:user/:session": (user, session) =>
    profileSession(user, session)

// call winnetou navigate properly
Winnetou.navigate("/profile/John/friends")