3

I'm developing a product detail page with /proudct?id=xxx route, when user in /proudct?id=1 jump to /proudct?id=2, only state dependency router.query.id change, I want to force reload the whole page instead of update some state.

JayTam
  • 209
  • 2
  • 11
  • just use `router.push(/product?id=2)` and put `useEffect` to handle `id` changes or else try `window.location.reload()` – boop_the_snoot Jun 17 '22 at 04:18
  • `window.location.reload()` will reload whole app, redux global state will lose. I just want to reload page, like jump to different route page, page component reload – JayTam Jun 17 '22 at 06:55
  • 1
    Then use the first option which I suggested router.push + useEffect – boop_the_snoot Jun 17 '22 at 07:03

3 Answers3

1

I achieve this using replace and then reload.

router.replace("/product?id=2").then(() => router.reload());
Raul Rueda
  • 650
  • 5
  • 16
0

There is an upcoming but still unstable feature unstable_skipClientCache: true where you can skip the client's cache, see snippet below.


const router = useRouter()
const { pathname, asPath, query, locale } = router

router.push(
  {
    pathname,
    query
  },
  asPath,
  {
    locale: newLocale,
    unstable_skipClientCache: true
  }
)

I use it for locale changes on my page as the session depends on it.

floflock
  • 586
  • 4
  • 11
-2

what worked for me was something like this but it doesn't feel like a good fix.

router.replace({
   pathname: '/[whatever]',
   query: { param_key: param_value },
}).then(() => router.reload())
Arthur Smith
  • 11
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '22 at 14:37