Rect IonTabs as nested route Animations not works

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):

              <Route path="/home">
                <Home />
              <Route path="/signUp" exact>
                <SignUp />

My Home.tsx (4 routes in total):

        <Route path="/home/search" exact>
          <Search />
        <Route path="/home/explore" exact>
          <Explore />
        <Redirect exact path="/home" to="/home/search" />
      <IonTabBar slot="bottom" className="py-1">
        <IonTabButton tab="search" href="/home/search">
          <IonIcon icon={searchOutline} />
        <IonTabButton tab="explore" href="/home/explore">
          <IonIcon icon={navigateOutline} />
  • 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


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