Tab bar reloads when navigating

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:


    <IonReactRouter >
      <Menu />
      <IonRouterOutlet id="main" >
        <Route path="/" component={Home} exact />
        <Route path="/signIn" component={SignIn} />
      <Route path="/tabs" component={MainTabs} />


          <IonRouterOutlet >
            <Route path="/tabs/tab1" component={Tab1} />
            <Route path="/tabs/tab2" component={Tab2} />
          <IonTabBar slot="bottom">
            <IonTabButton tab="lobby" href="/tabs/tab1">
            <IonTabButton tab="players" href="/tabs/tab2">

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?

this project, is over a year old and probably needs to be updated… i will take a look

1 Like