Problem with IonTabs on a nested route

So… I had a project that was working fine with tabs in a nested route. Recently, it started behaving erratically, a tab would not load, another would just flash for a second and go blank… I tried to reproduce the behavior on a smaller project. I couldn’t quite reproduce what happens in that project but I got to a piece of code that should work, but doesn’t.

App.jsx:

function App() {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/settings" component={Settings} exact />
          <Route path="/account" component={Account} exact />
          <Route path="/authentication" component={Authentication} exact />
          <Route path="/tabs" component={Tabs} exact />
          <Redirect from="/" to="/authentication" exact />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  )
}
export default App;

Tabs:

import React from "react"
import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from '@ionic/react';
import { Redirect, Route } from 'react-router-dom';
import { ellipse, square, triangle } from 'ionicons/icons';
import Feed from "../Feed"
import Timetable from "../Timetable"
import Statistics from "../Statistics"

function Tabs() {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/tabs/:tab(feed)" component={Feed} exact />
        <Route path="/tabs/:tab(timetable)" component={Timetable} exact />
        <Route path="/tabs/:tab(statistics)" component={Statistics} exact />
        <Redirect from="/tabs" to="/tabs/timetable" exact />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="feed" href="/tabs/feed">
          <IonIcon icon={triangle} />
          <IonLabel>Feed</IonLabel>
        </IonTabButton>
        <IonTabButton tab="timetable" href="/tabs/timetable">
          <IonIcon icon={ellipse} />
          <IonLabel>Timetable</IonLabel>
        </IonTabButton>
        <IonTabButton tab="statistics" href="/tabs/statistics">
          <IonIcon icon={square} />
          <IonLabel>Statistics</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  )
}

export default Tabs

Every other route is similar to this one:

import React from "react"
import { IonPage } from "@ionic/react"

function Timetable() {
    return (
        <IonPage>Timetable</IonPage>
    )
}

export default Timetable

The timetable tab just flashes for a second and disappears when I navigate to “/tabs”, which redirects to “/tabs/timetable”.

Shouldn’t this “just work”? Is there something I’m missing? I could swear I used this exact setup on a sample project, when I was deciding which cross-platform app framework to use, and it worked (also using React).

That probably shouldn’t be exact. You want any path starting with /tabs to go to the Tabs components, not just exact matches.

1 Like

Yep! I’ve solved it, but that wasn’t the only problem. That made it so that this project would render the tabs, instead of just flashing, but would “act erratically” as I said about my original project.
The problem was that my default tab (the one in the redirect) isn’t the leftmost tab. The default tab was the middle one. When I would try to switch to the leftmost one weird things wold happen. So I just reordered the tab buttons. I don’t know if that’s a bug or if we’re supposed to always have the leftmost tab as the default one.
I went over to the kitchen sink starter app (conference --type=react), which also has tabs in a nested route, and put the second tab in the redirect, instead of the leftmost one, and the same thing happened, so the problem isn’t really my code.