Ionic React: Going back IonTabs to another IonTabs error

I do not know if this is a bug or not. So I have router with switch. Each switch has different IonTabs inside it.

Here is my router:

<IonPage id="main">
  <Switch>
    <Route path="/store/">
      <IonTabs>
        <IonRouterOutlet id="main">
          <Switch>
            <Route path="/store/reports" exact component={Reports} />
          </Switch>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="reports" href="/store/reports">
            <IonIcon icon={newspaperOutline} />
            <IonLabel>Reports</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </Route>
    <Route path="/purchasing/">
      <IonTabs>
        <IonRouterOutlet id="main">
          <Switch>
            <Route path="/purchasing/due" exact component={SupplierDue} />
          </Switch>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="purchasingDue" href="/purchasing/due">
            <IonIcon icon={calendarNumberOutline} />
            <IonLabel>Due</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </Route>
 </Switch>
....

So I am redirecting from /store/reports with useHistory().push('/purchasing/due'). When I press back button (back using browser back button), the /store/reports is empty. It seems that the component is destroyed. No code from the component was being triggered. It is just empty screen.

Same thing happens when I redirect from the other way around.

How can I fix this?

Can you generate a sample github repo with a project? It’s very hard to understand what is going on from just what you’ve provided.

Hello,

Here is the repo: GitHub - AlvinStefanus/ionic-nav-route-error

In the main page (which is /tabs/tab1) click the “Go to Tab2” link in the middle of the screen. After you are being redirected to tab2, go back by clicking the browser back button. The error will show. The component of tab1 is gone, also try to click forward from the browser after that, the tab2 will be gone too.

I’m pretty sure it’s the switch statements, which control if a component should be in the DOM. Typically with Ionic’s routing, you don’t use this as we want the components to be in the DOM for faster back navigation.

Thought I think you should really reconsider this. As it’s pretty bad for UX to have multiple sets of tabs. As a user, I wouldn’t know what is “Home” more or less. Plus, other major apps that exist do not use this approach as well.

1 Like