bug: Going to a nested route inside another nested route doesn't show an animation on first visit

Bug Report

Ionic version:

• 5.x

Current behavior: If you have a nested route (/dashboard/users/:id, in the example below, note how it also has its own IonRouterOutlet) inside another nested route (/dashboard, also has its own IonRouterOutlet) and you are located on /dashboard, then navigate to a subpage /dashboard/users/:id(in the example below, click on User 1), there will not be an animation only on the first time that page is rendered (I would assume it has to do with the IonRouterOutlet needing to match a URL first before transitioning?), any subsequent navigations to it will have an animation. (sidenote: I also think that back animations are slightly different than usual?)

Some context what I want to achieve:

Take Instagram for example - if you are on your Home page, then click on a Post to see the post’s comments (that’s 1 nested route) and then you can click on the User of a given comment (that will take you to their profile), from which you can keep doing the same thing recursively (Post -> PostComments -> UserProfile -> Post -> … and so on); The reason why it has to be nested is because each Tab has to keep its own Stack. If I instead have a single /post-comments/:id and a single /user-profile/:id at the root of my router, each Tab that can go to those pages won’t keep their stack (i.e. Go to a Post from your Home page, then to a UserProfile, then on another tab, say from Search, you do the same thing and what you’d expect is that both tabs keep their stack.

Expected behavior: I expect there to be an animation on the nested route as well

Steps to reproduce:

1. Load the example below
2. Click on User 1

Related code:

https://stackblitz.com/edit/nested-route-bug?file=src/pages/UserDetailPage.tsx

Ionic info:

Ionic:

   Ionic CLI       : 6.16.3 (/Users/simo/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.11

Capacitor:

   Capacitor CLI      : 3.0.2
   @capacitor/android : 3.0.2
   @capacitor/core    : 3.0.0
   @capacitor/ios     : 3.0.2

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v16.3.0 (/opt/homebrew/Cellar/node/16.3.0/bin/node)
   npm    : 7.15.1
   OS     : macOS Big Sur

[fr3fou]

Also are you able to access that ionPage property in the latest stable version of Ionic React? Or did you install the dev build? If it only works in the dev build, then the feature has not shipped yet which would explain why it does not show up in the docs.

I’m using these versions

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!