React Navigation with Tabs not working

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…

        <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 />
      <IonTabBar slot="bottom" id="tabs">
        <IonTabButton tab="home" href="/my/home">
          <IonIcon icon={homeOutline} />
        <IonTabButton tab="birthdays" href="/my/birthdays/list">
          <IonIcon icon={listOutline} />
        <IonTabButton tab="profile" href="/my/profile">
          <IonIcon icon={personOutline} />

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

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

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 ?

: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.

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.

@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.