React Navigation with Tabs not working

Ionic Framework Ionic React
1

My routing with tabs recently stopped working on upgrading my libraries.

    "@ionic/react": "^5.3.1",
    "@ionic/react-router": "^5.3.1",

The code is…

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/my/home" component={Home} exact />
        <Route path="/my/birthdays/list" component={BirthdayList} exact />
        <Route path="/my/birthdays/add" component={AddBirthday} exact />
        <Route path="/my/birthdays/view/:key" component={ViewBirthday} exact />
        <Route path="/my/birthdays/edit/:key" component={EditBirthday} exact />
        <Route path="/my/profile" component={Profile} exact />
      </IonRouterOutlet>
      <IonTabBar slot="bottom" id="tabs">
        <IonTabButton tab="home" href="/my/home">
          <IonIcon icon={homeOutline} />
        </IonTabButton>
        <IonTabButton tab="birthdays" href="/my/birthdays/list">
          <IonIcon icon={listOutline} />
        </IonTabButton>
        <IonTabButton tab="profile" href="/my/profile">
          <IonIcon icon={personOutline} />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

From the docs I see that the path has a pretty different syntax.

<IonRouterOutlet>
  <Route path="/:tab(sessions)" component={SessionsPage} exact={true} />
  <Route path="/:tab(sessions)/:id" component={SessionDetail} />
  <Route path="/:tab(speakers)" component={SpeakerList} exact={true} />
</IonRouterOutlet>

It’s not clear to me how to re-write my component with this new syntax.

Like for the home tab, would it be like

<Route path="/:tab(home)" component={Home} exact />

?

If I wanted to route from another page directly to that Home tab, could I still goto /my/home ?

2

:tab is a named parameter in React Router, that uses the path-to-regexp library.

It’s not a new syntax, so I doubt it’s the reason why your code stopped working. Such a change would be a breaking one, requiring a new major version. The tabs starter for example does not use :tab.

Ionic 5.3.0 did introduce a new router though, so it’s possible that your problem is related to that. Unfortunately the changelog doesn’t say much about exactly what’s changed.

3

Anyway, if you have

<Route path="/my/home" component={Home} exact />
{/*...*/}
<IonTabButton tab="home" href="/my/home">

then with :tab it should be

<Route path="/my/:tab(home)" component={Home} exact />

The value of the tab parameter in the Route should match the tab value in the IonTabButton.

4

@mirkobalzarini I reverted to

    "@ionic/react": "^5.2.3",
    "@ionic/react-router": "^5.2.3",

and it works fine now. I updated the routes with the tab parameter and it still works. So something just amiss with 5.3 it seems.

Thanks.