Navigation Flow from Welcome/Sign-In to Home & Sub Pages

How-to Discussions
1

Hey guys, I stumbled upon navigation hell. The app has a Welcome/Sign-In flow that ends up at Home. Home contains 3 main pages. Profile, Search, and Messages. Profile contains Settings, Search contains Tinder-like Cards that you click to access Instant Message, Messages contains a list of conversations that you click to access Instant Message.

<Router ux:Name="router" />
<PageControl ux:Name="pages" Active="SuperProfile" TransitionDuration="0.2">
    <Page ux:Name="SuperProfile">
        <Navigator DefaultPath="Profile" DefaultTemplate="Profile">
            <ux:Include File="../Profile/ProfilePage.ux" />
            <ux:Include File="../Settings/ProfileSettingsPage.ux" />
        </Navigator>
    </Page>
    <Page ux:Name="SuperDiscover">
        <Navigator DefaultPath="Discover" DefaultTemplate="Discover">
            <ux:Include File="../Discover/DiscoverPage.ux" />
            <ux:Include File="../InstantMessages/InstantMessagesPage.ux" />
        </Navigator>
    </Page>
    <Page ux:Name="SuperMessages">
        <Navigator DefaultPath="Messages" DefaultTemplate="Messages">
            <ux:Include File="../InstantMessages/InstantMessagesPage.ux" />
            <ux:Include File="../Messages/MessagesPage.ux" />
        </Navigator>
    </Page>
</PageControl>

function clickedInstantMessages(args){
    router.push("SuperDiscover", {}, "InstantMessages");
}

function clickedBack(args){
    router.goBack();
}
2

Hi! Can you give us some more info on what the problem is? :slight_smile:

Also: I’d recommend making your pages using ux:Class rather than including them.

3

The error I’m getting is on router.goBack(); “Unable to navigate to route: SuperDiscover/Discover/”

4

There is no obvious reason why this would fail, especially on a goBack operation. This would imply it can’t find a page that it was previously at. Do you add/remove pages, or change the name of them at all?

Can you by chance isolate a reproduction into a small example?

BTW, DefaultPath is sufficient, the DefaultTemplate is just provided for backwards compatibility.

5

Found the source of the error while creating the example :slight_smile: I hadn’t named the Pages within the PageControl element on the Discover page. Here’s the example project. If you remove ux:Name on each Page of PageControl, you’ll see an error when router.goBack() is called: