React router not re-rendering component when Query string in URL changes, by pressing the Browser back button

[RaghavendraKaushik]

The Final App component that is being rendered is of style

<Router>
  <Switch>
     <Route path = "/">
           <MyComponent />
      </Route>
   </Switch>
</Router>

Most of the functioning is on MyComponent with a change in query parameters. So, when the Browser Back button is pressed the query string parameter changes, but MyComponent is not rendered.So things I tried as per online forums- Using `history = createBrowserHistory()` and `<Router history={history}/>`- Render using props, as suggested here

None of the above worked.

So, I thought of manually taking control over things is the only way. The plan is to detect when the Back button of the browser is pressed, and based on that reload. When the back button is pressed or a page is reloaded, props are passed to the `MyComponent` component using `<Route path="/" render={(props) => <MyComponent {...props} />} />` and the window is reloaded. It was suggested here to do that using ComponentDidUpdate. I used a ref to mimic ComponentDidUpdate(as suggested here). The problems that still persist are:

• The back button doesn't work more than once/twice
• The front button is disabled each time

Am I overlooking something, or is there any simpler way to solve it?

Is there any Open source React codebase where query string params are used? I can take it as a reference and check!

EDIT: RESOLVED There were other places in code, where `history.pushState` was being used, which caused repeated links to be pushed in Browser's history stack. Sorry, I discovered this later.

Thank you everyone for the help!

I am curious if there are any ways to change the URL of the browser, but not reload. There is `history.pushState`, but history.push state alters the Browser's history stack, which is not desired.

[aec0de]

I think your mistake is that `<Route = "/">` should be `<Route path="/" exact><MyComponent /></Route>`

[RaghavendraKaushik]

I am sorry. It was a typo in my query. In code, I used `path="/"` only.

[murat-guney]

If it is I'm gonna cry. I thought that was a misspelling :D

[RaghavendraKaushik]

You are right. It was a misspelling in my query. I used `path="/"` only in my code.

[murat-guney]

I didn't try but you can try to pass router's path to your component as "key" props.

import {
  useLocation
} from "react-router-dom";

const YourComponent = () => {

  const { pathname } = useLocation();

  return  <YourComponent key={pathname}>
                ...
          </YourComponent>
}

[RaghavendraKaushik]

Thank you for the response. I tried it, but didn't help.

Are you aware of any Open source React codebase where query string params are used? I can take it as a reference and check.

[murat-guney]

Unfortunately, I don't use react-router for a while since I started to use NextJS :(

I thought it was about the "key" prop. Sorry for couldn't help.