In this tutorial the tab bar doesn’t reload when navigating:
in GitHub: aaronksaunders/ionic-react-tabs-tut
But in the official conference app it reloads every time
It’s because in the first project (ionic-react-tabs-tut) the IonTabs are wrapped in an IonPage, so
there is only one IonPage for all the tab pages.
In my project I’m using this first project as a base, but the problem is that I don’t get Ionic Lifecycle methods to work in the tab pages. Also, animation doesn’t work when navigating to pages outside of the tab pages.
My app looks like this:
App.tsx:
<IonApp>
<IonReactRouter >
<Menu />
<IonRouterOutlet id="main" >
<Route path="/" component={Home} exact />
<Route path="/signIn" component={SignIn} />
...
</IonRouterOutlet>
<Route path="/tabs" component={MainTabs} />
</IonReactRouter>
</IonApp>
MainTabs.tsx:
<IonPage>
<IonTabs>
<IonRouterOutlet >
<Route path="/tabs/tab1" component={Tab1} />
<Route path="/tabs/tab2" component={Tab2} />
...
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="lobby" href="/tabs/tab1">
</IonTabButton>
<IonTabButton tab="players" href="/tabs/tab2">
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
Is there an official way to get tab navigation to work that doesn’t refresh the tab bar that
also benefits from lifecycle methods and animation?
1 post - 1 participant