Hide tabs when navigate/push to another page

Ionic Framework Ionic React
1

How do I hide tabs when I navigate to a page? It seems like a basic thing but I see no documentation on it. This is the skeleton of my app root:

<IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet basePath="/">
            ...<Route /> are here

            <Redirect exact from="/" to="/home" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="" href="/home">
		....
            </IonTabButton>

            <IonTabButton tab="" href="/search">
              ....
            </IonTabButton>

            <IonTabButton tab="" href="/more">
              ....
            </IonTabButton>
          </IonTabBar>
        </IonTabs>

Thanks!

Kevin

2

I found a way that works, but it seems a tad “hacky”.

On page components use either useIonViewWillEnter(() => showTabs()); or useIonViewWillEnter(() => hideTabs());

export function hideTabs() {
  const tabsEl = document.querySelector('ion-tab-bar');
  if (tabsEl) {
    tabsEl.hidden = true;
  }
}

export function showTabs() {
  const tabsEl = document.querySelector('ion-tab-bar');
  if (tabsEl) {
    tabsEl.hidden = false;
  }
}