Routing with Tab does not work properly

When I tried to have a default route of / and a subroute with tabs
When the page goes back to root route, the Tab still remains but the page is empty

App.tsx

    <IonApp>
      <IonReactRouter>
        <Route path="/auth">
          <Auth />
        </Route>
        <Route exact path="/">
          <Login />
        </Route>
      </IonReactRouter>
    </IonApp>

Tabs.tsx

  <IonPage>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/auth/reports">
            <Reports />
          </Route>
          <Route exact path="/auth/create">
            <Create />
          </Route>
          <Route exact path="/auth/account">
            <Account />
          </Route>
          <Route exact path="/auth">
            <Redirect to="/auth/reports" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="reports" href="/auth/reports">
            <IonIcon icon={barChart} />
            <IonLabel>Reports</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/auth/create">
            <IonIcon icon={addCircle} />
            <IonLabel>Create</IonLabel>
          </IonTabButton>
          <IonTabButton tab="account" href="/auth/account">
            <IonIcon icon={person} />
            <IonLabel>Account</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonPage>

The login page work properly / Root route, but when being routed to /auth then going back to / Login page, the page goes black, but the URL was already been change, I use useHistory of react-router-dom to navigate programaticaly.

Does someone encountered this error?
Any solution to this?

This is the result when navigating back to login page which is /

1 post - 1 participant

Read full topic