browser back button does not re-render component after router.push

Question

Scenario :

I am on Page A which have a X component that has state sunny = false initially. after I did some operation in component; state is updated to sunny = true. now I route.push(Page B). when I navigate back to Page A using browser back button I see component X has stale state 'sunny' = true. I want it to reset to sunny = false.

Is it bug in nextjs route? If not how can I force particular component to re-render so not using stale states

Does this answer your question? [Intercept/handle browser's back button in React-router?](https://stackoverflow.com/questions/39342195/intercept-handle-browsers-back-button-in-react-router) — Michael Harley, Mar 11 '22 at 08:53

score 0 · Answer 1 · answered Mar 11 '22 at 09:06

As far as I know, this is not a bug.

Depending on the router that you use, the solution can be different. But this is the "JavaScript way" of handling your routing.

componentDidMount() {
  // to make sure window.onpopstate is fired went his page is opened.
  this._isMounted = true;
  window.onpopstate = () => {
    if(this._isMounted) {
      // set state to initial state.
    }
  }
}

source: https://stackoverflow.com/a/39363278/7552329

how to do this with functional components? – cikatomo Sep 10 '22 at 08:24 — cikatomo, Sep 10 '22 at 08:24

score -1 · Answer 2 · answered Mar 11 '22 at 08:54

-1

You can pass query parameters as below:

Router.push({
    pathname: '/about',
    query: { name: 'Someone' }
})

and access it to change the state

answered Mar 11 '22 at 08:54

TheRakeshPurohit

551
1
6
22

How will passing `query` parameter will be useful in this case. since I want to reset state on Page A, and query parameter will be accessible in page B – Sukh Mar 14 '22 at 05:21
you can use that param to update the state – TheRakeshPurohit Mar 14 '22 at 08:28

browser back button does not re-render component after router.push

2 Answers2