Nested navigation with router, pagecontrol and navigator

How-to Discussions
1

I want to have a nested navigation, with a Navigator inside a PageControl inside a Navigator. The reason for the nesting is because I want to have a TabBar at the bottom on some of the pages. In the inner most Navigator I try to push to one of the pages, but it says it’s unable. Do I need to know the whole path to navigate? How can this be done?

I have an example to illustrate what I want to achieve, just click the buttons, and when you press N2 it gives you an error.

<App>
	<Panel ux:Class="FirstPage">
		<JavaScript>
			module.exports.neste_clicked = function () {
				router.push("neste");
			}
		</JavaScript>
		<Router ux:Dependency="router"/>
		<StackPanel>
			<Basic.Button Text="Neste" Clicked="{neste_clicked}"/>
		</StackPanel>
	</Panel>
	<Panel ux:Class="PC1">
		<Visual ux:Dependency="next" />
		<Basic.Button Text="PC2">
			<Clicked>
				<NavigateTo Target="next"/>
			</Clicked>
		</Basic.Button>
	</Panel>
	<Panel ux:Class="PC2">
		<Router ux:Dependency="router"/>
		<Navigator DefaultTemplate="n1" GotoState="Unchanged">
			<N1 ux:Template="n1" router="router"/>
			<N2 ux:Template="n2" router="router"/>
			<N3 ux:Template="n3" router="router"/>
		</Navigator>
	</Panel>
	<Panel ux:Class="PC3">
	</Panel>
	<StackPanel ux:Class="N1">
		<JavaScript>
			module.exports.n2_clicked = function () {
				router.push("n2");
			}
		</JavaScript>
		<Router ux:Dependency="router"/>
		<Text Value="N1" />
		<Basic.Button Text="N2" Clicked="{n2_clicked}"/>
	</StackPanel>
	<StackPanel ux:Class="N2">
		<Router ux:Dependency="router"/>
		<Text Value="N2" />
	</StackPanel>
	<Panel ux:Class="N3">
		<Router ux:Dependency="router"/>
	</Panel>
	<Panel ux:Class="NestePage">
		<JavaScript>
			module.exports.tredje_clicked = function () {
				router.goto("tredje");
			}
		</JavaScript>
		<Router ux:Dependency="router"/>
		<StackPanel>
			<Basic.Button Text="Tredje" Clicked="{tredje_clicked}"/>
		</StackPanel>
	</Panel>
	<Panel ux:Class="TredjePage">
		<JavaScript>
			module.exports.fjerde_clicked = function () {
				router.push("fjerde");
			}
		</JavaScript>
		<Router ux:Dependency="router"/>
		<StackPanel>
			<Basic.Button Text="fjerde" Clicked="{fjerde_clicked}"/>
		</StackPanel>
	</Panel>
	<Panel ux:Class="FjerdePage">
		<JavaScript>
		</JavaScript>
		<Router ux:Dependency="router"/>
		<StackPanel>
			<Text Value="Title" />
			<PageControl>
				<PC1 ux:Name="pc1" next="pc2"/>
				<PC2 ux:Name="pc2" router="router"/>
				<PC3 ux:Name="pc3"/>
			</PageControl>
			<Text Value="TabNavigation" />
		</StackPanel>
	</Panel>
	<Router ux:Name="router"/>
	<Navigator DefaultTemplate="first" GotoState="Unchanged">
		<FirstPage ux:Template="first" router="router"/>
		<NestePage ux:Template="neste" router="router"/>
		<TredjePage ux:Template="tredje" router="router"/>
		<FjerdePage ux:Template="fjerde" router="router"/>
	</Navigator>
</App>
2

Have you checked out Router.gotoRelative ?

https://www.fusetools.com/docs/fuse/navigation/router/gotorelative_eca3d620

Or, its sibling pushRelative.

There is also Router.modify which allows arbitrary modifications of the route.

3

I kinda made this work using:

module.exports.n2_clicked = function () {
    router.getRoute(function (path) {
        path[4] = "n2"
        router.push.apply(router,path);
    })
 }

But would still like to know if this is the recommended solution.

4

pushRelative sounds perfect, but I get

did not find an outlet from the provided Node
5

What arguments did you pass to pushRelative?

6

Yeah, I see now that I passed the wrong arguments. Can you please point me to an example?

7

I don’t have an example beyond the one listed in the docs here:

https://www.fusetools.com/docs/fuse/navigation/router/gotorelative_eca3d620