Nested routes/pages inside IonTabs? (v4 React)

Ionic Framework ionic-v3
1

I’m having a heck of a time getting nested routes to work inside an IonTabs component. Is this basic structure allowed?

All goes well for a while, but hitting the tab button again to return to the /shop root seems to make the other pages permanently disappear. I suspect there is a bug in IonRouterOutlet because if I remove it (and <IonTabs>) navigation works fine.

<IonApp>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/:tab(shop)" component={Shop} />
              <Route path="/:tab(shop)/:item" component={Item} />
              <Route path="/:tab(shop)/:item/detail" component={Detail} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="shop" href="/shop">
                <IonIcon icon={pricetag} />
                <IonLabel>Shop</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonApp>
2

have a working project here - https://github.com/aaronksaunders/mySimpleTabsApp

1 Like
3

FYI it was this bug: https://github.com/ionic-team/ionic/issues/19622