bug: Navigation Breaks

[AksharX]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Navigation breaks, the page becomes overlayed by another ion-page and make the app unusable until you refresh.

Expected Behavior

Navigation shouldn't break by visiting the links. Seems like multiple IonRouterOutlet are being spawned and there are pages that are in the wrong place.

Steps to Reproduce

https://stackblitz.com/edit/ionic-react-routing-8hm4w3

Navigating by utilizing the links will eventually break the application

Code Reproduction URL

https://stackblitz.com/edit/ionic-react-routing-8hm4w3

Ionic Info

No response

Additional Information

No response

[brhoomjs]

Fixing that by setting these:

<ion-content color="light" [fullscreen]="true">...

[amandaejohnston]

Thanks for the issue. Could you try this with the latest version of Ionic, and add an ionPage prop to the nested router outlets as described here?

I noticed that you're using a fork of the nested router outlets example from the docs. Assuming the fix from #20219 works here, we should update the docs accordingly, including the inline code examples (which are currently missing the ionPage prop). I'll get things organized once we've confirmed the ionPage fix still works.

[ionitron-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!