Problems with nested routes with ionic tabs

Ionic Framework Ionic React
1

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

Did you start with the template generated b by the cli? Can you put your code in a small project or host it in codesandbox? It would make it easier to debug

3

Yes I did start the project with the ionic start cli command, using the tab template.

Here is the link to code sandbox:


I hope you have access to it.

I put the running version on it. To debug, you have to uncomment the <IonRouterOutlet>component in App.tsx.

4

the “CommonHeader” approach is not how ionic components are set up to work… once you remove that you are fine.

See the updated project here: https://codesandbox.io/s/great-goldberg-zuwqz?file=/src/pages/MainPage.tsx

1 Like
5

Is that what the documentation meant, when it was saying "Tabs are a top level navigation component to implement a tab-based navigation… "?
So what would be the right way to set up the ionic components to get the layout I want? Put the “CommonHeader” in each Tab page?

6

Create the component and put it in each page is what I would do, maybe someone else has a better approach.

1 Like
7

Id go even further and recommend that you don’t use a common header approach all together.

It tends to be premature optimization that isn’t really needed

8

Thank you all for helping me sorting this out. :grinning:

The CodeSandbox example was just a demo app to debug the issue mentioned above.
Currently I’m using this UI pattern in a bigger App and now it seems that this is not recommended.

@mhartington Isn’t this a common UI design pattern ( … several pages are using the same header, with a navigation bar at the bottom …), that many mobile apps are using? E.g the Youtube App seams to be one of them, at least on the iPhone.

9

You’re mistaking the visual appearance and code usage.

While the headers are visually the same, they are built up for each page as they are needed. They are not part of the tabs view all together as the tabs are only responsible for loading the pages needed.

1 Like
10

@harington But isn’ this exactly what @aaronksaunders was proposing?