How to proparly handle 2 level navigation using a single router

How-to Discussions
1

Hi,

I have a main Navigator, which contains a few pages (login, register, home). Home contains another Navigator with subpages (app page 1, app page 2, etc.). Home also contains an EdgeNavigator with links to the app pages.

When trying to navigate to a subpage from the home page’s sidebar, I do something like router.goto(‘home’, null, ‘app_page_1’, null). The issue is that although already on the home page, when running goto the whole “home” animates, instead of only the inner app page, in the inner navigator. How to navigate to level 2 pages without animating the whole thing?

I tried adding a second scoped navigator, bu that seems to mess up access to the first one, which forgets how to get to “home”. Altough using this second router yields the wanted result: only the inner page animates.

Also, maybe a bit unrelated but still linked to navigation, when switching pages in the manner described above, the sidebar remains open if the subpage has been navigated to at least once before. What’s the best way to close it when navigating to another subpage?

2

Hi!

I’m struggling a bit to understand your post. Do you use two navigators or two routers?

The issue is that although already on the home page, when running goto the whole “home” animates, instead of only the inner app page, in the inner navigator. How to navigate to level 2 pages without animating the whole thing?

What do you mean animates? Does it leave and enter back in?

What’s the best way to close it when navigating to another subpage?

Its really up to you - you need to keep an Observable somewhere in JS that controls the open state and then toggle that.

3

Hey,

2 routers controlling 2 navigators, because using just one router to go through both of them (goto(parent, null, child, null)) animates the parent page as well. By animates I mean, yes, exiting and reentering the parent page.

4

That sounds strange. I’ve raised an internal issue to investigate whether this is inteded behavior and if there is anything you can do to disable it.

5

Chances are this relates to the default parameter for the page. If you did goto("home") without a parmaeter, and then goto("home", null, "two", null)" the parameter’s probably don’t match. Or if home was the default page.

I’m just finishing a fix now that makes these parameters compare equal. It will be available in an upcoming release.