Ionic 6.20.1 React - Tabs example in documentation does not work, tabs loaded from Tab Root page do not function correctly

Ionic Framework Ionic React
1

Hi there. I attempted to follow the documentation here to no avail.

At first glance it appears clicking on tabs yields a blank page but upon further investigation it looks to be that the content is hidden with the ion-page-hidden class. The initial load works, the tabs are displayed correctly, but if you click to another tab or even refresh the page, the content gets hidden.

Here are my routes in App.tsx

    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
            <Route exact path="/login" component={ Login } />
            <Route exact path="/register" component={ Register } />
            <Route exact path="/dashboard" render={ (props) => <Dashboard {...props} /> } />
            <Route exact path="/">
              <Redirect to="/dashboard" />
            </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>

Here is Dashboard.tsx

import { calculator, list } from 'ionicons/icons';
import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { Redirect, Route, RouteComponentProps } from 'react-router-dom';
import Tally from './Tally';
import PurchaseList from './PurchaseList';

const Dashboard: React.FC<RouteComponentProps<{}>> = (props) => {
  console.log("DASHBOARD PAGE");

  return (
    <IonTabs>
      <IonRouterOutlet>
        <Redirect exact path="/dashboard" to="/dashboard/tally" />
        <Route exact path="/dashboard/tally" component={ Tally } />
        <Route exact path="/dashboard/list" component={ PurchaseList } />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="tally" href="/dashboard/tally">
          <IonIcon icon={ calculator } />
          <IonLabel>Tally</IonLabel>
        </IonTabButton>
        <IonTabButton tab="list" href="/dashboard/list">
          <IonIcon icon={ list } />
          <IonLabel>List</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default Dashboard;

Here is Tally.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const Tally: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tally</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tally</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonContent>
    </IonPage>
  );
};

export default Tally;

Any idea why this doesn’t work? Thanks in advance.

2

Found the issue. In App.tsx the route for /dashboard was set to “exact”. I believe that interfered with the /dashboard/* routes. Works great now!