Ionic v4 routing and root


#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.


#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

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