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.

ionic-query-string-issue.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

Thanks for the issue. Things seem to be working as intended here. Your useQueryParams hook gets the current query params when it is called. Since useQueryParams gets called on every render, the query params that are shown are going to change when attempting to navigate back because the params in the URL bar have changed.

It sounds like you only want to get the query params once on page load. In that case, you might want to try something like this:

import React, { useState } from 'react';
import { useIonViewWillEnter } from '@ionic/react';

...

function Child() {
  const [title, setTitle] = useState('');

  useIonViewWillEnter(() => {
    const queryParams = new URLSearchParams(window.location.search);
    const info = queryParams.get('info');
    
    switch(info) {
      case 'hello':
        setTitle('Hello There!');
        break;
      case 'goodbye':
        setTitle('GOOD BYE!');
        break;
      default:
        setTitle('This is the default info when no query param is provided in the url.');
        break;
    }
  })
  return (
    ...
  )
}

You probably do not even need useLocation as the data does not need to be reactive. Can you try this, and let me know if it resolves the issue?

@liamdebeasi

Thanks @liamdebeasi

Can confirm that the code you provided works as expected.

While totally not a bug - I am curious tho - would you say the behavior from my repro is just related to ionic and the page stack management and any other delightful magic happening? The original way was React Router v5 recommended approach and i've never seen that flash type content in a straight up React app.

Thanks again for a quick reply and workaround! My actual implementation is identical to the repro so I can use it there no prob!

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!

@liamdebeasi

Makes sense - thanks again @liamdebeasi !

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.

Navigation Menu

Repository navigation

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

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

liamdebeasi commented on Jun 28, 2022

babycourageous commented on Jun 28, 2022

liamdebeasi commented on Jun 29, 2022

babycourageous commented on Jun 29, 2022

ionitron-bot commented on Jul 29, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions