Fixing Back Navigation in Ionic Tabs: Prevent Tab Reset on Page Exit

When building a mobile app using Ionic with Angular, it’s common to use a tab-based layout with routes like:

/tabs/tab1
/tabs/tab2
/tabs/tab3
/tabs/tab4

However, if you navigate from one of the tabs to a non-tab route such as /wallet, pressing the hardware back button on Android or using NavController.back() might reset your tab selection to tab1, even if the user started from tab4.

This article explains why this happens and shows you how to fix it using best practices and Angular routing configurations.

🔍 Problem Description

Let’s say a user is on /tabs/tab4 and navigates to /wallet. When they press the back button, instead of returning to tab4, the app navigates to /tabs/tab1.

Why this happens:

• Ionic loses track of the previous active tab when navigating to a route outside the ion-tabs outlet.
• Returning with router.navigate or even NavController.back() may not restore the correct tab context.

✅ Solution: Preserve Tab Context on Navigation

To preserve the active tab when leaving the tab context:

1. Pass the active tab as state when navigating away.
2. Listen for the back button and restore the tab explicitly.

🛠 Example Implementation

1. app-routing.module.ts

Place non-tab routes outside the /tabs children tree.

const routes: Routes = [
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  },
  {
    path: 'wallet',
    loadChildren: () =>
      import('./wallet/wallet.module').then((m) => m.WalletPageModule),
  },
  {
    path: 'tabs',
    loadChildren: () =>
      import('./tabs/tabs.module').then((m) => m.TabsPageModule),
  },
];

2. tabs-routing.module.ts

Define tabs and their routes inside tabs/.

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () =>
          import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
      },
      {
        path: 'tab2',
        loadChildren: () =>
          import('../tab2/tab2.module').then((m) => m.Tab2PageModule),
      },
      {
        path: 'tab3',
        loadChildren: () =>
          import('../tab3/tab3.module').then((m) => m.Tab3PageModule),
      },
      {
        path: 'tab4',
        loadChildren: () =>
          import('../tab4/tab4.module').then((m) => m.Tab4PageModule),
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full',
      },
    ],
  },
];

📦 Navigating with Tab Context

When navigating from a tab to /wallet, pass the current tab in state:

this.router.navigate(['/wallet'], {
  state: { fromTab: 'tab4' },
});

⏪ Handling Back Navigation in /wallet

In wallet.page.ts:

import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';

constructor(private platform: Platform, private router: Router) {}

ngOnInit() {
  this.platform.backButton.subscribeWithPriority(10, () => {
    const fromTab = history.state.fromTab || 'tab1';
    this.router.navigate(['/tabs', fromTab]);
  });
}

Or, if you’re using a custom back button in the header:

goBack() {
  const fromTab = history.state.fromTab || 'tab1';
  this.router.navigate(['/tabs', fromTab]);
}

🔁 Alternative: Use NavController if possible

If /wallet is opened using NavController.navigateForward(), you can simply call navCtrl.back() to return without resetting the tab selection.

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

goBack() {
  this.navCtrl.back();
}

But keep in mind this won’t work if the navigation wasn’t part of the navigation stack (like direct URL access).

🧪 Testing the Fix

1. Go to /tabs/tab4
2. Navigate to /wallet
3. Press the hardware back button
4. ✅ You should land back on tab4, not tab1

🧩 Summary