bug: pushing a view in a nested outlet can go back when it should not

[melenudo]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x, v7.x

Current Behavior

If you define a nested route like the documentation example (https://ionicframework.com/docs/react/navigation), the animation to nested route and the animation exiting nested route are wrong (in iOs when you navigate to nested route, the first time, the semi-opaque layer is missing and when you navigate back from the nested route, the nested content is immediately hidden).

I've tried the nested route definition using the documentation example:

const DashboardPage: React.FC = () => {
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route exact path="/nested/page1" component={NestedPage1} />
        <Route exact path="/nested/page2" component={NestedPage2} />
      </IonRouterOutlet>
    </IonPage>
  );
};

And a suggested work around from other issue (https://github.com/ionic-team/ionic-framework/issues/20219#issuecomment-648469645):

const DashboardPage: React.FC = () => {
  return (
    <IonRouterOutlet ionPage={true}>
      <Route exact path="/nested/page1" component={NestedPage1} />
      <Route exact path="/nested/page2" component={NestedPage2} />
    </IonRouterOutlet>
  );
};

The first option directly has no animations (only when navigate to nested route). I've got the best results with the second option but the animations are wrong. See video (configuring chrome animation speed to 10% in dev tools):

https://github.com/ionic-team/ionic-framework/assets/480573/dd3b3fb7-ed4c-4980-9bc7-854c0834faa9

Expected Behavior

Identical page animations in nested and non-nested routes.

Steps to Reproduce

1. Clone example project: https://github.com/melenudo/pure-ionic-nested
2. Execute ionic serve
3. Navigate to http://localhost:8100/home in Chrome (using dev tools to emulate an iOs device).
4. Click "Go to Nested Page1".
5. You will see missing semi-opaque layer (only the first time).
6. Click "Go back".
7. The content of current page is hidden and the animation to home page takes a leap.

Code Reproduction URL

https://github.com/melenudo/pure-ionic-nested

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/project/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/project/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/index.js
   -
   /Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/Users/u01a34ad/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.6.4

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : not installed @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.19.0 (/Users/u01a34ad/.nvm/versions/node/v18.19.0/bin/node) npm : 10.2.3 OS : macOS Unknown

Environment:

HTTP_PROXY : http://localhost:8000 HTTPS_PROXY : http://localhost:8000

Additional Information

No response