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

Hi there. I attempted to follow the documentation here to no avail. I have a login and register page, and then a dashboard page which implements tabs. When the dashboard page is loaded, the page is blank. If I comment out the redirect that sends the user to the first tab, I get the tab bar, but clicking on any of the TabButton items yields a blank page.

Update: Removing the Switch from IonRouterOutlet makes the first tab load correctly. However, clicking to another tab results in a blank page, and accessing the main tab directly (/dashboard/tally) without relying on the redirect yields a blank page. I had added the Switch in order to fix navigation issues I was having with history.push. I can figure out a way around that but I still need to know why the tabs are malfunctioning.

Update 2: I’ve discovered that the page isn’t technically blank; all the markup is there but the IonPage has the ion-page-hidden class applied to it. No idea why this is happening still. But page isn’t “blank”, it’s just hidden. Any ideas?

Here are my routes in App.tsx

    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Switch>
            <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>
          </Switch>
        </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.

1 post - 1 participant

Read full topic