Nested routes with tabs in React

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?


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

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



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