Nested routes with tabs in React

Ionic Framework Ionic React
1

Hello guys, I’m having an issue with the nested routing in React. I generated a normal tabs project by using the Ionic CLI. The problem is that when I navigate to the DayDetailsPage, I get issues with the tabs bar that still gets rendered and also the page seems to freeze (I cannot click on anything). If I refresh the page, it works as expected and the tabs no longer appear + the buttons work, so I’m pretty sure this is a routing issue. I’ve had this issue before and I was forced to do a workaround by cutting off some functionality.

I navigate to DayDetailsPage with

 history.push(DailyRoutes.DayDetails, {
            day: day
        });

Can you guys give me some pointer as to how I should approach this issue?

App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/">
          <SetMoodPage />
        </Route>
        <Route exact path={DailyRoutes.DayDetails}>
          <DayDetailsPage />
        </Route>

        <Route path="/tabs">
          <TabsRouting />
        </Route>
       </IonRouterOutlet>
    </IonReactRouter>

  </IonApp>
);

TabsRouting.tsx

        <IonTabs>
            <IonRouterOutlet>
                <Route exact path={DailyRoutes.Main}>
                    <MainPage />
                </Route>
                <Route exact path={DailyRoutes.Settings}>
                    <SettingsPage />
                </Route>
                <Route exact path="/">
                    <Redirect to={DailyRoutes.MoodInput} />
                </Route>
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
                <IonTabButton tab="main" href={DailyRoutes.Main}>
                    <IonIcon aria-hidden="true" icon={triangle} />
                </IonTabButton>
                <IonTabButton tab="settings" href={DailyRoutes.Settings}>
                    <IonIcon aria-hidden="true" icon={ellipse} />
                </IonTabButton>
            </IonTabBar>
        </IonTabs>