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