Problems with nested routes with ionic tabs

I have problems with Ionic nested routing along with tabs.
The problem is, that I do neither see the tab pages nor the tab bar. Just white screen.

Here is my App.tsx

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet> 
          <Route path='/main' component={MainPage} />
          <Route exact path='/'>
            <Redirect to='/main' />
          </Route>
          </IonRouterOutlet> 
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

My Mainpage.tsx

import Tab1 from './Tab1';
import Tab2 from './Tab2';
import Tab3 from './Tab3';

const MainPage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle color='primary'>Common Header</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonTabs>
          <IonRouterOutlet>
            <Route path={'/main/tab1'} component={Tab1} exact={true} />
            <Route path={'/main/tab2'} component={Tab2} exact={true} />
            <Route path={'/main/tab3'} component={Tab3} />
            <Redirect exact from={'/main'} to={'/main/tab1'} />
          </IonRouterOutlet>
          <IonTabBar slot='bottom'>
            <IonTabButton tab='tab1' href={'/main/tab1'}>
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab='tab2' href={'/main/tab2'}>
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab='tab3' href={'/main/tab3'}>
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonContent>
    </IonPage>
  );
};
export default MainPage;

All Tab Pages look the same an are from tab template

import ExploreContainer from '../components/ExploreContainer';

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonHeader collapse='condense'>
          <IonToolbar>
            <IonTitle size='large'>Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name='Tab 1 page' />
      </IonContent>
    </IonPage>
  );
};

The interesting thing is - when I remove the <IonRouterOutlet> as well as </IonRouterOutlet> in App.jsx, it works, but I loose my animations, which I definitely do not want.

Any idea what I did wrong?

2 posts - 2 participants

Read full topic