Component is re-rendered before leaving the page

Hi all 👋

I’d love to use this library in my project but I’m having an issue with route changes. When I leave a page that is re-rendered. This throws an error in some cases because the route has changed in the meantime and the component can’t find some route parameters.

Let me give you an example.

• I’m in the index /
• I navigate to /category?id=6 which renders category.js page
• I navigate back to /
• the URL changes from /category?id=6 to /
• before leaving category.js the component is re-rendered. Since the category.js page relies on the id parameter an error is thrown

Am I doing something wrong here?

[Solitaryo]

I have the same problem, I’m using Apollo and a url with query params, every time I go back from a URL with query params, the animation doesn’t work, it first load the page and then it does the animation, like re rendering the component first and then using the animation. But this only happens when you have URL params, which is weird. Any idea how to force the animation?

[Bleuzen]

Also happens with framer-motion. The problem seems to be that next router already changes the route and query parameters before the exit animation finished.

So the old page gets the query parameters of the new route it is transitioning to.

Example:

If you use the state to get the query parameters:

  const router = useRouter()
  const { id } = router.query

the id parameter first is the id parameter passed to this page. But when you click on a link, next already changed the route and query parameters to the new page. So the id parameter becomes undefined, if the new route it is transitioning to does not have an id parameter. And since this is a state change, the old page which is fading out is now re-rendered with the new id parameter of the new route (which is undefined in this example).

Somehow next router route and query changes have to be delayed until the exit animation is done.

One workaround for now is to check the pathname before setting the id (and other query parameters you use) so that the old route doesn’t get the parameters of the new route. This may look something like this:

let id

export default function Category() {
  const router = useRouter()

  if (router.pathname === '/category') {
    id = router.query.id
  }

...
}