bug: Pages in router get double-mounted and weird when navigating and using dynamic routes

[davidisaaclee]

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

v7.x

Current Behavior

• I'm using something similar to the recommended "redirect when user is not logged in" from docs: https://ionicframework.com/docs/react/navigation#routing-in-ionic-react
• When a user logs out via my /settings page, I want to change the path to / while logging out so the next login goes to /. (The complicating case here is that navigating to /settings while logged out should show a login screen and then show settings once logged in, so I can't always redirect from a logged-out /settings to /.)

When doing both router.push('/') and logging out, the router state gets weird:

• Checking the Elements tab in dev tools shows two instances of the login page (i.e. contents of /) – this isn't the case when navigating to login page normally
• When logging back in after this, the /settings page is shown on top of the expected page. The path in the browser is shown to be /, not /settings.

Expected Behavior

Either:

• Using push('/') and logging out (in a way that affects IonRoute#render) yields a login screen which can login to the expected / screen without the overlaid /settings, or
• I'd like someone to tell me I'm using Ionic wrong and how to do this correctly :)

Steps to Reproduce

1. Open repro URL below
2. Press "Log in" button to log in to the home screen
3. Press "settings" button to nav to settings screen
4. Press "log out" button to log out and nav back to /, which shows login screen
5. Press "log in" once more You should have a screen of garbage

Code Reproduction URL

https://codesandbox.io/p/sandbox/ionic-router-dynamic-routes-bug-forked-ht3xy9

Ionic Info

sorry, I can't run that on CodeSandbox. I can move the code into a git repo if you need.

My personal project's ionic info which encounters seemingly the same bug:

Ionic:

   Ionic CLI : 7.1.1

Utility:

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

System:

   NodeJS : v20.2.0
   npm    : 9.8.1
   OS     : macOS Unknown

Additional Information

My best guess is that this is wrong:

router.push("/", "root", "push");
logOut();

If I change logOut to setTimeout(() => logOut(), 1), the bug doesn't happen.