Tab bar reloads when navigating

Ionic Framework Ionic React
1

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?

2

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

1 Like