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?

1 post - 1 participant

Read full topic