bug: Route jump using replace will not destroy the page dom

[yunfeng-weee]

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

• [ ] v4.x
• [X] v5.x
• [x] v6.x
• [ ] Nightly

Current Behavior

When I use replace in the jump path, it causes the page to stay in the dom forever. Will not be destroyed, enter the page again, the useEffect method will not be executed。

for example : /test/test1 (replace)-> /test/test2/:location (replace) -> /test/test3/:location (push) -> /test/test4/:location (navigate('/test/test1', 'back', 'pop')) -> /test/test1 (replace)-> /test/test2/:location (replace) -> /test/test3/:location

Finally, when you enter the test3 page, you cannot get the latest parameters of history params, and the useEffect method will not be executed.

Expected Behavior

Hope to get the latest parameters and executed useEffect function，It now appears that the page remains in the dom and is not destroyed.

Steps to Reproduce

/test/test1 (replace)-> /test/test2/:location (replace) -> /test/test3/:location (push) -> /test/test4/:location (navigate('/test/test1', 'back', 'pop')) -> /test/test1 (replace)-> /test/test2/:location (replace) -> /test/test3/:location

Reproducible using the project I provided

Code Reproduction URL

https://github.com/yunfeng-weee/ionic-router-question

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (D:\nvm\v14.18.1\node_modules@ionic\cli) Ionic Framework : @ionic/react 5.9.4

Capacitor:

Capacitor CLI : 3.6.0 @capacitor/android : 3.6.0 @capacitor/core : 3.6.0 @capacitor/ios : 3.6.0

Utility:

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

System:

NodeJS : v14.18.1 (D:\nodejs\node.exe) npm : 6.14.15 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Does this issue happen in the latest version of Ionic 6?

[yunfeng-weee]

According to the same code logic, the v6 version also has this problem

Ionic:

Ionic CLI : 6.20.1 (D:\nvm\v14.18.1\node_modules@ionic\cli) Ionic Framework : @ionic/react 6.1.14

Capacitor:

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

Utility:

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

System:

NodeJS : v14.18.1 (D:\nodejs\node.exe) npm : 6.14.15 OS : Windows 10

[liamdebeasi]

Thanks. Can you please clarify your steps to reproduce the issue? I am trying to follow the steps to reproduce. However, the routing buttons in the app do not follow the steps correctly.

For example, when on /test/test3/:location, the steps to reproduce say to push the /test/test4/:location route, but the application currently replaces to /test/test4/:location instead. Even after manually changing the code to push the correct route, I was unable to reproduce the reported behavior.

[yunfeng-weee]

Sorry, I modified the code, you can pull the latest code to reproduce the problem

[Dangerous828]

Hello, in fact, the reason for this problem is that the framework uses z-index and ion-page-hidden to deal with the ion-page level of the page. They will not work normally after encountering the replace.

[Dangerous828]

In fact, you can directly use the official demo, and then add $router.replace to jump to pages above 2 layers, you can reproduce, you can see multiple ion-pages in parallel

[Dangerous828]

@liamdebeasi Thanks For your watching!