Ionic Tabs not removing query parameters when navigating to other pages and back

Issue

I have an ionic app with some tabs. I am navigating to one of the tabs using an a tag:

<a [routerLink]="['/tabs/home']" [queryParams]="{id: category.id}">

The above takes me to the a url like '/tabs/home?id=2'. However, when I click on the tabs and navigate to other tabs like profile or more, then I click on the home tab again it navigates me to '/tabs/home?id=2' instead of '/tabs/home'. I do not understand why the query parameter is still persisting and not removed. Any help would be appreciated.

tabs.html:

<ion-tabs class="footer-tabs" color="transparent">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person-outline"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="more">
      <ion-icon name="list-outline"></ion-icon>
      <ion-label>More</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs-routing:

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../home-tab/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'profile',
        loadChildren: () =>
          import('../profile-tab/profile.module').then((m) => m.ProfilePageModule),
      },
      {
        path: 'more',
        loadChildren: () =>
          import('../more-tab/more.module').then((m) => m.MorePageModule),
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full',
      },
    ],
  }
];

Solution

You can add a query param in the tab property so that it restarts when you press it.

See this:

How to automatically add a query parameter when clicking an ion-tab?

I hope help you.

Answered By - rugo