Let’s make my summarize the issue:

• You leave the tabs section on tab User with routerDirection="forward"
• Now you want to go back
• You will send back to tab 1 (Home) - not to User where you left the tabs

• The reason: The url is only tabs, not the last tab page you visited

So this route is matching:

      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full',
      },

And the user will be redirect to home instead of tabs/user

This is based on https://github.com/lampi87/ionic-bug-test (you have to add the redirect route again to see the issue). This repo has not the redirect route, so the user stays on User where he left the tabs

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

same issue here: router-outlet destroyed

Hi everyone,

I have opened a PR that should resolve this issue: https://github.com/ionic-team/ionic/pull/18005

One of my colleagues will be reviewing it soon, but in the meantime if anyone would like to take a look and provide feedback, that would be great!

We appreciate your patience as we work to resolve this issue 🙂

@bossjon uh ur right 👍🏻 completely forgot about navigation back via swipe gesture… I added this case to my demo.

ion-back-button-tabs fully support swipe gestures now! For the workaround it seemed easiest to disable the gesture for the particular page.

any news on that? I took a look at the ionic-conference app because it’s working there. Interesting implementation…

Removed redirectTo from tabs routes looks like a fix for this issue, but it caused another issue, there’s no route for ''. So I don’t think it’s a real fix

Note that this sample app: https://github.com/kensodemann/test-prolea which I created to demo a different but related issue (#14861) also shows this behavior if the person picking this up needs a sample app to reproduce this.

Hi there,

This issue has been resolved, and I have published a nightly build of Ionic with the fix. You can install it with npm i @ionic/angular@dev.

Please let me know if you are still running into any issues with this.

Thanks!

I solved the problem by navigate with ionic NavController instead of angular router I changed the following line:

this.router.navigateByUrl(url)

to

this.navController.navigateForward(url)

Same here, the router-outlet destroyed issue makes the page transition becomes rude, without animation (at least in ios).

Simple reproduce:

• Create page with tabs
• In first tab (say, home tab), create list of items.
• Set the item’s href to item detail page.
• Click it, and you’ll be redirected to the detail page.
• Now refresh browser, you will stay in detail page.
• Press ion-back-button (with defaultHref). You’ll be moved to home tab.
• Now from home tab, click on that item again, and the issue will occur.

Update: For my case, this issue is solved by setting routerDirection="forward" to my items in home tab.

Same issue here. Navigating from a subpage backwards lands on the first tab instead the last selected.

More: https://stackoverflow.com/questions/52268092/navigate-back-to-tab-index-with-ionic-4/52268576#52268576

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

It solves the issue, but the url is the wrong one at the top, it’s the root tab url (/tabs in my case). Also if you tap the current tab, it tries to load the root tab url.

We are having this issue here as well. If I initiate the navigation outside the Tabs router or navigate to a page that is outside of the Tabs router I cannot access the pages nested over the Tabs router.

The only solution that worked for us is to nested all the pages inside the Tabs and hide the ion-tab-bar on the pages I don’t want it to appears.

<ion-tab-bar slot=“bottom” color=“secondary” *ngIf=“tabsLayout”>

Of course, this is far from the ideal solution but it’s a good way to work around this.

No, you don’t have to do this. You can just not use ion-back-button, instead you add a normal button, a back style, and call navCtrl.back() in the click event. Then you get your expectation

<ion-button (click)="navCtrl.back()">
        <ion-icon slot="icon-only" name="arrow-round-back" color="dark"></ion-icon>
</ion-button>

@aftabkhatri Did you even read what @paulstelzer wrote? Without redirect everything works, but what about redirect? When the user goes to the /tabs page, the page is blank. @paulstelzer knows what the issue is.

I think you get confused and you are discussing another issue.

I solved the problem by navigate with ionic NavController instead of angular router I changed the following line:

this.router.navigateByUrl(url)

to

this.navController.navigateForward(url)

Does not work for me

@servrox, The way you did, it works, but we’re talking about pages with no tabs. Like a global page that can be opened anywhere, and you can go back.

We are having this issue here as well. If I initiate the navigation outside the Tabs router or navigate to a page that is outside of the Tabs router I cannot access the pages nested over the Tabs router.

The only solution that worked for us is to nested all the pages inside the Tabs and hide the ion-tab-bar on the pages I don’t want it to appears.

<ion-tab-bar slot=“bottom” color=“secondary” *ngIf=“tabsLayout”>

Of course, this is far from the ideal solution but it’s a good way to work around this.