2 routers that share templates

How-to Discussions
1

Hi!

i don’t know if that’s a bug of if i should change something as it’s the expected behavior:

I have 2 tabs (each one with it’s router/navigator):

  • newsFeeds
  • search

from both pages you can navigate to the user profile page and then to it’s friends page so they share templates.

The problem is that after navigating forward in both pages when “router.goBack()” mixes the navigation history:

for example:

newsFeedsPage --> Profile (user1) --> Friends (user1)

then:

searchPage --> Profile (user2) --> Friends (user2)

then go back to newsFeedPage (now on “Friends (user1)”) and call “router.goBack” it will go back to “Profile (user2)”

<PageControl ux:Name="MainPager" Active="{pageControlActivePage}" Interaction="None">
    <Page ux:Name="newsFeedsPage">

        <Router ux:Name="routerNews" BackButtonAction="None"/>
        <Navigator DefaultPath="newsFeedsMainPage">
            <NewsFeedsMainPage Name="newsFeedsMainPage" router="routerNews"/>
            
            <ProfilePage ux:Template="profilePage" router="routerNews" />
            <FriendsPage ux:Template="friendsPage" router="routerNews" />
        </Navigator>

    </Page>

    <Page ux:Name="searchPage">
        <Router ux:Name="routerSearch" BackButtonAction="None"/>
        <Navigator DefaultPath="searchMainPage">
            <SearchMainPage Name="searchMainPage" router="routerSearch"/>

            <ProfilePage ux:Template="profilePage" router="routerSearch" />
            <FriendsPage ux:Template="friendsPage" router="routerSearch" />
        </Navigator>
    </Page>
2

The preferred way to use a Router is to have one in the app and manage the top-level navigation that way as well.

If you do need two Router instances (for example to maintain separate history) you need to put IsMasterRouter="false" on them.

IF that doesn’t work then we’ll need to see the JS that is doing the routing operations.

3

it solved the problem!!

did not know that IsMasterRouter=“false” was needed

thnx!!!

4

Is it possible to have 3 routers in one page? The main one in the app as a dependency, the second to control an internal PageControl with tabs, and the third to control some deep navigation, but be able to do goBack using the first router?

I loose the connection between the router defined on a page and the pagecontrol when introducing a third one.

5

Hi Christer,

this sounds like a complex enough challenge to deserve its own forum post with some example code / complete repro. Otherwise the question (and answer to it) would remain highly theoretical.