Hiding IonTab on subpages - Ionic React 5 - ionic-framework

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>