Navigation Stack Back Button Ionic 4

#1

Hi all,

I’m new to ionic and I’ve been starting by using new ionic-v4 beta. While checking upon navigation I’ve found that now ion-nav component is deprecated and it is encourage to handle navigation through angular routes. This is clear.

Now when I define a outlet with a particular name to swap between pages and trying to go back to the previous page I have been having some trouble to go back to the previous page by using a plain ion back button without specifically defining the defaultHref attribute to my previous page. My goal would be to not include this attribute and that ionic by itself could keep track of the previous navigated page.

Previously this worked when pushing a certain component page programmatically with the modal controller

async presentTwo() {
    const modal = await this.modalCtrl.create({
      component: TwoPage
    });
    await modal.present();
  }

My setup is as follows, I have one inner page I can navigate and will render a component with a custom outlet:

<ion-router-outlet name="test"></ion-router-outlet>

and in my routes definition I have

const routes: Routes = [
    { path: '', redirectTo: '/page/inner/(test:one)', pathMatch: 'full' },
    {
        path: 'inner', component: InnerPage, children: [
            { path: 'one', outlet: 'test', loadChildren: './inner/one.page.module#OnePageModule' },
            { path: 'two', outlet: 'test', loadChildren: './inner/two.page.module#TwoPageModule' }
        ]
    }
];

Here I have the redirection to page one, which will have a navigation to the second page like this

<ion-button  href="/page/inner/(test:two)">
    Go Two
</ion-button>

Then on the second page I define a back button on the header which only works if then I define the href to the previous page

    <ion-buttons slot="end">
      <ion-back-button icon="close" text="Cancel"  defaultHref="/page/inner/(test:one)">
      </ion-back-button>
    </ion-buttons>

Without the ‘defaultHref’ attribute the button isn’t shown, which I believe is due to the fact no stack navigation is detected by ionic. Is there a way to achieve this without the use of ion-nav deprecated component?