React Ionic Tabs nested Routes Animación no works

Question

I have tried from different ways to create nested routes with Tabs, the idea would be the following:

• WelcomePage->LoginPage->HomePage(Tab)->RecipePage

The problem is in the entrance animation to homepage and also the departure, in the case of Welcomepage to LoginPage if it works, also to go backwards from recipepage to homepage.

I know that the matter lies in IonrouterOutlet and Route, and as these are organized, but I have made me the combinations that have occurred to me, and using several ways to render the component in the route, as is the render, component, and also as Children. If someone has done something similar and has gotten something optimal, or maybe it's happening something overlooked, I would appreciate help, thank you.

This is my app.tsx (Summary, I have more routes in addition /signup, about 50 routes):

      <IonApp>
        <IonReactRouter>
          <IonContent> // This Content only makes sense here because, the white space
                         // which replaces the animation turns black, blank looks better.
            <IonRouterOutlet>
              <Route path="/home"> //La ruta de las tabs
                <Home />
              </Route>
              <Route path="/signUp" exact>
                <SignUp />
              </Route>
             </IonRouterOutlet>
          </IonContent>
        </IonReactRouter>
      </IonApp>

My Home.tsx (4 routes in total):

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/home/search" exact>
          <Search />
        </Route>
        <Route path="/home/explore" exact>
          <Explore />
        </Route>
        <Redirect exact path="/home" to="/home/search" />
      </IonRouterOutlet>
      <IonTabBar slot="bottom" className="py-1">
        <IonTabButton tab="search" href="/home/search">
          <IonIcon icon={searchOutline} />
          <IonLabel>{textos["page_buscar"]}</IonLabel>
        </IonTabButton>
        <IonTabButton tab="explore" href="/home/explore">
          <IonIcon icon={navigateOutline} />
          <IonLabel>{textos["page_explorar"]}</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

• A more graphic sample, is reached to appreciate a white screen, that's where it should being the animation, this is on Android.

• On iphone the animation of PageRecipesList(/recipes) to PageRecipe(/recipe) (no tabs):

• On iphone the animation of PageHomeSearch(Tab home/search) to PageRecipesList(/recipes):

• If you take off the that you comment above would look like this:

Thanks!

EDIT

The same that i want to do, but in only one file:

app.tsx:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/login">
          <Login />
        </Route>
        <IonTabs>
          <IonRouterOutlet>
            <Route exact path="/tab1">
              <Tab1 />
            </Route>
            <Route exact path="/tab2">
              <Tab2 />
            </Route>
            <Route path="/tab3">
              <Tab3 />
            </Route>
            <Route exact path="/">
              <Redirect to="/tab1" />
            </Route>
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

The idea is do this: login->tab1, and tab1->login.

Answer 1

Have a look at how Ionic solve this in their Ionic React Conference Starter app, in particular this snippet from App.tsx and this snippet from their tabs component, MainTabs.tsx.

From your example code, the following changes should fix the animation issues:

• In App.tsx, remove IonContent
• In App.tsx, use the render method prop instead of nesting the Home component (e.g. <Route path="/home" render={() => <Home />} /> instead of <Route path="/home"><Home /></Route>)
• Similarly, use the render method prop in Home.tsx, the component with the tabs
• In the tabbed pages' components (Search and Explore in your example) make sure to use IonPage as this is needed to achieve animated navigation (see docs), e.g.

<IonPage>
  <IonHeader>...</IonHeader>
  <IonContent>...</IonContent>
</IonPage>

In general, follow Ionic's architecture as explained in their docs and as demonstrated in their example app and it should just work.

Answer 2

Alex Steinbergs answer was extremely helpful to me. Thank you!

I was struggling with similar issues for days. I was nesting the routes the same way. But finally I noticed there was a version mismatch in my package.json

Make sure you have the same versions of @ionic/react, rect-router, react-router-dom and @ionic/react-router as in the example app above, otherwise various bugs appear.

// package.json

"dependencies": {
   ...
  "@ionic/react": "^6.1.15",
  "@ionic/react-router": "^6.1.15",
  "react-router": "^5.2.0",
  "react-router-dom": "^5.2.0",
}

Also I'd recommend to study the differences between render and component props on <Route> component. Unwanted re-renders may also cause flickers.

react router difference between component and render