# Nested navigation with router, pagecontrol and navigator

**URL:** <https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362>\
**Category:** How-to Discussions\
**Created:** [January 15, 2017, 2:48pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362 "2017-01-15T14:48:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [January 15, 2017, 2:48pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/1 "2017-01-15T14:48:52Z")

</div>

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.

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 15, 2017, 3:12pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/2 "2017-01-15T15:12:06Z")

</div>

Have you checked out `Router.gotoRelative` ?

[https://www.fusetools.com/docs/fuse/navigation/router/gotorelative\_eca3d620](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.

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [January 15, 2017, 3:13pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/3 "2017-01-15T15:13:23Z")

</div>

I kinda made this work using:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [January 15, 2017, 3:16pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/4 "2017-01-15T15:16:52Z")

</div>

`pushRelative` sounds perfect, but I get

```
did not find an outlet from the provided Node
```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 15, 2017, 3:29pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/5 "2017-01-15T15:29:39Z")

</div>

What arguments did you pass to `pushRelative`?

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [January 15, 2017, 6:26pm UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/6 "2017-01-15T18:26:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 16, 2017, 8:53am UTC](https://forums.fusetools.com/t/nested-navigation-with-router-pagecontrol-and-navigator/3362/7 "2017-01-16T08:53:52Z")

</div>

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

[https://www.fusetools.com/docs/fuse/navigation/router/gotorelative\_eca3d620](https://www.fusetools.com/docs/fuse/navigation/router/gotorelative_eca3d620)