Stacking Tab Bars

Hey Guys,

I am trying to stack TabCars for navigation into each other.
First of all, is that allowed at all?

So what i have is:
In Apps.tsx a normal tab bar as it comes with the automatic generation of the app.
Inside the TabBar i have one component:

      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1Comp} exact={true} />
         <Route path="/tab2" component={Tab2Comp} exact={true} />

Inside the Tab1Comp I want to create another TabBar while following the nested Routing as the docs:

    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path={`${match.url}/nestedTab1`} component={Page1} />
          <Route path={`${match.url}/nestedTab2`} component={Page2} />
          <Redirect from={`${match.url}`} to={`${match.url}/tab1`}/>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="nestedTab1" href={`${match.url}/page1`}>
            <IonLabel>Monday</IonLabel>
          </IonTabButton>
          <IonTabButton tab="nestedTab2" href={`${match.url}/page2`}>
            <IonLabel>Tuesday</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>

The first time I walk through from page1 to page2 it works fine.
The problem occurs when I come from Tab2Comp back to Tab1Comp.
Nothing is displayed though. I would expect it to redirect to Page1.
Why is that not working and how can i solve my problem?

Thanks for help guys.

1 post - 1 participant

Read full topic