Hiding IonTab on subpages - Ionic React 5

Question

I am building Ionic React application, and the version of ionic is 5. In my application, I have bottom navigation. I have mentioned the logic of bottom navigation in App.tsx.

I have an add button on the Dashboard page on clicking that button I want a page to open which will not contain the bottom navigation. I got many answers over the internet which is for Ionic-Angular. I am specifically looking for an answer Ionic-React.

App.tsx    
     <IonContent>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/profile" component={Profile} exact={true} />
              <Route path="/dashboard" component={Dashboard} exact={true} />
              <Route path="/dashboard/addInfo" component={Info} exact={true} />
              <Route path="/" render={() => <Redirect to="/dashboard" />} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={profile} />
                <IonLabel>Profile</IonLabel>
              </IonTabButton>
              <IonTabButton tab="dashboard" href="/dashboard">
                <IonIcon icon={grid} />
                <IonLabel>Dashboard</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonContent>

Answer 1

This might be what @MostafaHarb was trying to explain. You can have nested IonRouterOutlets, so place your tabs within a TabContainer component off your main App.tsx (shown here as a render prop on the /tabs Route). You will likely need to provide a fallback route, in this case there's a redirect to the tabs Route when the path is "/"

        <IonReactRouter>
              <IonRouterOutlet>
                <Route path="/notabs" render={() => <div>a page no tabs</div>} />
                <Route
                  path="/tabs"
                  render={() => (
                      <IonTabs>
                        <IonRouterOutlet>
                          <Route
                            path="/tabs/tab1"
                            component={Tab1}
                            exact={true}
                          />
                          <Route
                            path="/tabs/tab2"
                            component={Tab2}
                            exact={true}
                          />
                          <Route
                            path="/tabs/tab3"
                            component={Tab3}
                            exact={true}
                          />
                        </IonRouterOutlet>
                        <IonTabBar slot="bottom">
                          <IonTabButton tab="tab 1" href="/tabs/tab1">
                            <IonIcon icon={circle} />
                            <IonLabel>Tab1</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="tab 2" href="/tabs/tab2">
                            <IonIcon icon={square} />
                            <IonLabel>Tab2</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="tab 3" href="/tabs/tab3">
                            <IonIcon icon={triangle} />
                            <IonLabel>Tab3</IonLabel>
                          </IonTabButton>
                        </IonTabBar>
                      </IonTabs>
                  )}
                />
                <Route
                  path="/"
                  render={() => <Redirect to="/tabs" />}
                  exact={true}
                />
              </IonRouterOutlet>
        </IonReactRouter>
    </IonApp>
  );

Good luck!

Answer 2

I did something like this and that worked for me. I created an id for the tabs and then manipulated that to show or hide

    function showTab() {
       const tabBar = document.getElementById('appTabBar');
       if (tabBar !== null) {
           console.log("enabled")
           tabBar.style.display = 'flex';
       }
    }

function hideTab() {
   const tabBar = document.getElementById('appTabBar');
   if (tabBar !== null) {
      tabBar.style.display = 'none';
   }
}

<IonTabBar slot="bottom" id="appTabBar" >
      <IonTabButton tab="account" href="/account">
           <IonIcon icon={personCircleOutline}/>
           <IonLabel>Profile</IonLabel>
           </IonTabButton>
    </IonTabBar>