Fix Next.js component state not refreshing on navigation

May 7, 2021

Fix Next.js component state that does not refresh when you navigate by adding key={router.asPath} to the Component in _app.js so React remounts the page.

~~~

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.

Tagged: Next.js · All topics

~~~