bug: React route navigate back with query string(URL search params) shows flash of default(non-query string) content

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
• Nightly

Current Behavior

Not sure if this is specifically an Ionic bug or related to react router, URL search params, or something entirely different - When working with Ionic React and a url search param in the route, navigating back from the route with a search param shows a flash of content for the route if the search param was not provided. For example navigating back from todos?todo=1 briefly shows the contents of todos before popping the page from the stack and navigating back.

https://user-images.githubusercontent.com/14936212/175848414-886ec938-c423-426f-a277-2755beac72fd.mov

Expected Behavior

the page should just pop off the stack w/o showing the flash of non-“query string” content.

Steps to Reproduce

In the repo are three buttons. One goes to a base route and the other two are the base route with a url search param after. Navigate to the base route to see what is rendered when no search param is provided. Then navigate back. Now, navigate to either of the other two routes. You will see a different ui rendered that uses the search param. When navigating back from either of these routes, you will see a flash of the default route content (w/o search params).

Code Reproduction URL

https://github.com/babycourageous/ionic-routing-query-string-bug

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/renedellefont/.fnm/node-versions/v16.13.1/installation/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.10

Capacitor:

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

Utility:

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

System:

NodeJS : v16.13.1 (/Users/renedellefont/.fnm/node-versions/v16.13.1/installation/bin/node) npm : 8.1.2 OS : macOS Big Sur

─────────────────────────────────────────────────

 Ionic CLI update available: 6.18.1 → 6.20.1
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

Additional Information

No response

[liamdebeasi]

it does appear to be related to the page transition. When starting the transition, the component re-renders. In a regular React Router app (without Ionic), the component does not re-render because there is no exiting transition.

Perhaps there is some improvement we can make to minimizing re-renders, but this issue still would have been a problem. For example, if something in your component caused a re-render mid-transition you would have seen this issue as well.

Glad to hear the issue is resolved. I am going to close this. Thanks for the report!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.