Ionic v4 routing and root

Ionic Framework
1

I have read the interesting paper of Josh Morony about Ionic v4 routing https://www.joshmorony.com/using-angular-routing-with-ionic-4/ and add a look to the code and I’m still unsure about the navigation regarding root in v4

In v3 you’ve got navCtrl.setRoot which set the root of that particular navigation and app.getRootNav().setRoot which set the root for the all app/all navigations

In v4 I didn’t found the corresponding. Is it correct it isn’t possible in v4 to set a root anymore / respectively to reset a navigation stack to zero?

I do understand that the back button with v4 will not be automatic, has to be handled “manually”, but still would be cool to be able to clear the history, specially when it goes to an app where login is mandatory

Any thoughts?

P.S.: of course I’m also aware that in a pwa on the web in a browser there are a back/next buttons but not in an app

2

IIRC v4 is using standard Angular routing. Angular routing works more like web routing. There are not roots or stacks. Every page has a unique URL that can be accessed from any other page.

1 Like
3

You can make a transition to a “root” page in pretty much the same way in Ionic 4, the NavController provides these methods:

  • goRoot
  • goBack
  • goForward

Which you can use to give Ionic’s router outlet a sense of direction (which can be important for animations especially). So, if you are going to a route that you want to be the root page you could just do this:

this.navCtlr.goRoot('/route');

Or, if you are using router link in your template:

<some-element routerLink='/route' routerDirection='root'>
4 Likes
4

thx for your feedback, it confirms what I understood. also thx for that note, didn’t thought about it :wink:

5

What is the routerDirection directive and where are it’s docs? I can’t find them.

4 Likes
6

Indeed. Even Google has trouble finding any content on it.

7 
<some-element routerLink='/route' routerDirection='root' replaceUrl='true'>

Use replaceUrl=‘true’ because even with routerDirection=‘root’ sometimes it navigates to history.

8

goRoot() function is not found in navController. is there any other solution.

9

Try
this.navController.navigateRoot('');

this loads your root page and flushes the route history. You can add any page to set as the new root of your routes:

this.navController.navigateRoot('/newRootPage');