How do you change tabs

Ionic Framework Ionic React
1

I spent more than a day on this, and i bet it’s gonna be something dead simple.

So how do you navigate out of an IonTab, how do you change tabs if you have more?

I have a header on a page in a tab, i want the user to be able to go to a ( root ) login page.
Anything i tried i’m still in the context of the tab. I can see the bottom toolbar, i see every other tab on the DOM, hidden, but not the Login page component.

In angulars NavController module you can call the navController.navigateRoot(url: string) method, and it does the job.

What i tried:
history prop,
routerLink prop,
usehistory from react-router-dom,
Link from react-router-dom
useIonRouter from ionic/react,
navigate from NavContext ionic/react,

2

Tab buttons work like this:

      <IonTabButton tab="tab-help" href={routeHelp}>
        <IonLabel>
          <Trans id="tabbar_title.help">Help</Trans>
        </IonLabel>
      </IonTabButton>

If your buttons are structured like this, you can change between tabs.

If you want to completely navigate away from all tabs, then you need to wrap the routes that should have tabs in a <IonTabBar> and exclude the routes that should not have tabs. There are a few examples of that if you search this forum.

3

In fact in Angular using navcontroller isnt necessarily the only or best way

It is indeed a routing thing where u need to setup your routes with and without the components that holds the iontabsbar

Maybe it is easier to start with the app without tabs - like blank starter, make the login and then navigate to the main tabs conponent

This way you also can inplement route guards

4

yes it is, start blank let you add tabs

5

Thanks for your reply, tt seems i wasn’t clear enough i am sorry.

This is my tab, I don’t have a problem navigating in between these two routes in my tab. I have a problem navigating away/out from lets say my map page, to a root page, or any other page whatsoever .

    <IonContent>
      <IonReactRouter>
        <IonTabs onIonTabsWillChange={(e) => setSelectedTab(e.detail.tab)}>
          <IonRouterOutlet>
            <Route exact path="/tabs/map">
              <Map />
            </Route>
            <Route exact path="/tabs/list">
              <List />
            </Route>
            <Route exact path="/tabs">
              <Redirect to="/tabs/map" />
            </Route>
          </IonRouterOutlet>
          <IonTabBar className="map-tab-bar" slot="bottom">
            <IonTabButton tab="map" href="/tabs/map">
              <div className="map-tab-icon">
                <img src="/assets/tab-map.png" height="15px" width="15px" />
              </div>
              <IonLabel className="map-tab-label" color="primary">
                Lorem ipsum
              </IonLabel>
            </IonTabButton>
            <IonTabButton tab="list" href="/tabs/list">
              <div className="map-tab-icon">
                <img src="/assets/tab-admin.png" height="15px" width="15px" />
              </div>
              <IonLabel className="map-tab-label" color="primary">
               Lorem ipsum
              </IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonContent>
6

The app starts in a tab, login is secondary, but even if it would be the other way, I would still like to know how do you unmount a tab, how do you go from /tab/help to /anything or /otherTab/notHelp?

7

Understood - I am not a react person, so cannot tell - it is a routing question I would think

8

Your example doesn’t show any non-tab pages…

9

Solved it finally, it is insane how much contradiction is in the docs and in the different solutions. For me ,not using IonPage to wrap my Tabs and also ditching IonReactRouter in my Tabs and also wrapping my root IonRouterOutlet with an IonPage solved the problem.

1 Like