Skip to content

Next.js, what to do when the state of a component is not refreshed when navigating

New Course Coming Soon:

Get Really Good at Git

I ran in this issue, basically my component has an useState() hook to set some variables and the state was not updated when navigating with the router.

Turns out my custom _app.js, which I copied from the tutorial and was just used to add global styling to the app, had this code:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

I changed it to:

import { useRouter } from 'next/router'

export default function App({ Component, pageProps }) {
  const router = useRouter()

  return <Component {...pageProps} key={router.asPath} />
}

and it worked again as expected.

I just had to add the path as key.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my Next.js (pages router) Handbook

Here is how can I help you: