# Fix Next.js component state not refreshing on navigation

> 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.

Author: Flavio Copes | Published: 2021-05-07 | Canonical: https://flaviocopes.com/nextjs-refresh-state-navigation/

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:

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

I changed it to:

```js
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.