React.js IonTabs: How to define pages that do not include the tab bar at the bottom

Ionic Framework Ionic React
1

I am wondering:
How to define routes of pages that do not include the tab bar at the bottom, in Ionic React.

I used to use Angular.
In Angular Ionic I defined the tab routes as such, inside routes.ts:

export const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/tabs/tabs.routes').then((m) => m.tabsRoutes),
  },
  {
    path: 'tabs/news/profile/:uid',
    loadComponent: () => import('./pages/profile/profile.page').then((m) => m.ProfilePage),
  },
...
]

Here, the profile.page would not have the tab bar, since it’s not defined inside tabsRoutes.

For further reference, here is how my tabsRoutes looks like in Angular:

export const tabsRoutes: Routes = [
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    component: TabsPage,
    canActivate: [entryDialogGuard],
    children: [
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadComponent: () => import('../home/home.page').then((m) => m.HomePage),
      },
      ...
    ]
  }

The home.page of course includes the tab bar at the bottom, since it’s defined as a child of tabs.routes.

I am wondering whether ionic react.js provides any similar clean way to achieve the same.

All I saw was this post:

But it only provided a few strange hacks and is quite outdated. Not sure if this is the recommended solution.

I also checked the docs but I did not find anything on this matter, which I find weird since this is quite a common requirement for tabbed apps.

2

If you want some routes to be completely independent of the tab bar, just don’t wrap them with the tab bar component.

Something like:

<IonReactRouter>
  <Switch>
    <Route path="/no-tab-bar">
      <IonPage>
    </Route>
    <AppTabBar>
      <IonRouterOutlet>
        <Route path="/with-tab-bar">
          <IonPage>

<AppTabBar> is a component that contains <IonTabs> and the various tabs and then renders its children.

Also the post you linked is not quite outdated; ionic-react-router hasn’t been updated in 4 years :confused:

1 Like