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