[React] Ionic is not doing nice transitions using tabs, router and backbuttons

Hello! I’ve been already struggling for a lot of time trying to solve an issue with the navigation in React. I’m using Ionic React 7.0 and Started with the tabs template.

My actual setting is:

      <GameProvider roomName={roomName}>
              <Redirect exact path="/" to="/game-settings" />
              <Route exact path="/gameSettings" component={GameSettings}>
              <Route exact path="/gameSettings/teams/:roomName" component={TeamSettings}>
              <Route exact path="/gameSettings/rules/:roomName" component={RuleSettings}>

Each component is exported using React.Memo([TheComponent]).

Also each one of the compoenets has the following initial structure:

          <IonTitle>Crear juego</IonTitle>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
            <IonTitle size="large">Crear juego</IonTitle>

Any help? I have already researched everything I could, but no luck at all. It happens as PWA, and as webapp
Recording 2023-12-07 162603

It looks like your component is getting reloaded unnecessarily. You should be able to get <IonPage> to render without flickering even without using useMemo().

Are you using any of the Ionic lifecycle hooks, like useIonViewDidEnter()? I’d first check for hooks causing unnecessary reloads during the transition.

1 Like

Turned out to be my fault. The way I was hiding “internal” or “routes under authentication” was causing it. It works now perfectly.