Ionic tab bar changes URL but not rendered page

Question

I have a tab bar in Ionic React that should display on some pages and not others. I recently upgraded to Ionic React 5.0.7, and since then my tabs have stopped working. Specifically, although clicking on the tabs changes the URLs, it doesn't reliably change the page that's rendered, and instead shows the same page. (For some odd reason, clicking Discover from Profile works, but not vice versa.) Still, console messages from the page I navigate to do appear, even if none of the visual components do. And if I refresh the page, the correct page renders.

I think my code is quite similar to the example Ionic React Conference App, so I'm confused what's going on here.

It works properly in @ionic/react and @ionic/react-router version 0.0.10, but not 4.11.10, 5.0.5, or 5.0.7.

TabBar.tsx:

const TabBar: React.FC<TabBarProps> = () =>
    <IonTabs>
        <IonRouterOutlet>
            <Route path="/:tab(discover)" component={Discover} exact />
            <Route path="/:tab(profile)" component={Profile} exact />
            <Route path="/Page3" component={Page3} />
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
            <IonTabButton tab="discover" href="/discover">
                <IonIcon icon={search} />
                <IonLabel>Discover</IonLabel>
            </IonTabButton>
            <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={person} />
                <IonLabel>Profile</IonLabel>
            </IonTabButton>
        </IonTabBar>
    </IonTabs>;

export default TabBar;

App.tsx:

const App: React.FC = () => {
    return (
        <IonApp>
                <IonReactRouter>
                    <IonRouterOutlet>
                        <Route exact path="/login" component={Login} />
                        <Route exact path="/register" component={Register} />
                        <Route path="/" component={TabBar} />
                    </IonRouterOutlet>
                </IonReactRouter>
        </IonApp>
    )
}

Answer 1

think you are missing the default path for the TabBar component

<IonRouterOutlet>
   <Route path="/:tab(discover)" component={Discover} exact />
   <Route path="/:tab(profile)" component={Profile} exact />
   <Route path="/Page3" component={Page3} />
   <Route exact path="/" render={() => <Redirect to="/discover" />} />
</IonRouterOutlet>