Subpages using IonTabBar

I am developing a hybrid app similar to Instagram. I want to show IonTabs only after the user has either logged in or continues as a guest.

In the routes insides IonTabs, how do I access other routes so that the tab bar is not shown? This is similar to how Instagram has a tab bar on the home page, but upon clicking a post or user profile, the tab bar isn’t shown.

    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Switch>
            <Route exact path="/">
              <Login />
            </Route>

            <IonTabs>
              <IonRouterOutlet>
                <Route exact path="/home">
                  <Home />
                </Route>
                <Switch>
                  <Route exact path="/profile/:username">
                    <Profile />
                  </Route>
                  <Route exact path="/profile">
                    <Profile />
                  </Route>
                </Switch>
              </IonRouterOutlet>

              <IonTabBar slot="bottom" className="ion-hide-sm-up">
                <IonTabButton tab="home" href="/home">
                  <IonIcon icon={homeOutline} />
                  <IonText>Home</IonText>
                </IonTabButton>
                <IonTabButton tab="user-profile" href="/profile">
                  <IonIcon icon={personCircleOutline} />
                  <IonText>Profile</IonText>
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </Switch>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>

This is currently what I have. For example, if someone taps on a button leading to /profile/john_doe from Home the tab bar shouldn’t be shown.

Additionally, this shows an error in the console when accessing a page in IonTabs

a sample project is stackblitz would be helpful here