Page does not change after clicking next/link

[timmysmalls]

Hey guys, I've run into an issue while trying to navigate to another page using the next/link. The situation is quite straightforward. I have a page with a url parameter called slug ([slug].js). In my case the slug parameter represents different categories of products. So I have /shoes and /shirts for example. When I navigate from the homepage to /shoes with the next/link, everything works. No problems. But when I navigate from /shoes to /shirts, nothing happens. Next.js doesn't seem to react to the link click. It changes the route from /shoes to /shirts, but the entire page stays the same. It's supposed to rerender a list of products, and change the breadcrumbs, but it seems that Next.js doesn't realize that it has to unmount the previous page, and mount the next. In this case /shoes and /shirts both use the same dynamic page template: [slug].js. My links look as follows:
<Link href="/[slug]" as={ /${slug} }><a>Shoes</a></Link>. So I'm aware that I have to use both the href as well as the 'as' parameter, but it seems like Next.js refuses to run the getInialProps/getStaticProps/getServerSide props method again. Maybe it's because it's the same react component. But I'd really like to call the server side method again to render information for my new page, and I don't want Next to view it as the same page, just because it uses the same page template. I've also tried explicitly setting the shallow prop to false, which it should do by default anyway. As expected, that didn't do anything for me. Does anyone know how I can get Next to see these pages as different entities? Thanks in advance!

[TyMick]

Just to make sure, when you're trying to navigate to /shoes, does your link look like this?

<Link href="/[slug]" as="/shoes">
  <a>Shoes</a>
</Link>

[timmysmalls]

Yeah that's exactly what I have. I think I found the issue though. It seems like the server side method (getInitialProps / getStaticProps / getServerSideProps) does get called, but that the page component itself does not unmount. So when I go from shirts to shoes, the page components stays mounted, it just receives new props. If that is the case then that explains my issue. I'm using a useEffect call that is dependent on the route that I'm on. I made the useEffect call depend on an empty array because I figured it would need to run only once, and the component would be unmounted and remounted for every page change, but now it seems that the component will just receive the new props without unmounting/remounting. I assume this is because the next page uses the same page component as the page you're already on, just with different URL parameters. I couldn't find any clear answer on whether this is correct in the Next.js docs, so I asked @jamesmosier if he could check in his code to see if he gets the same results, to make sure I didn't just screw something up.

[jamesmosier]

If i understand correctly, this seems to work for me:

/pages/products/[slug]/index.js

import Link from 'next/link'

export default function SlugPage({ params }) {
  return (
    <div>
      <Link href="/products/[slug]" as="/products/baz">
        baz
      </Link>
      <Link href="/products/[slug]" as="/products/abc">
        abc
      </Link>
      <pre>{JSON.stringify(params, null, 2)}</pre>
    </div>
  );
}

export async function getServerSideProps(context) {
  return {
    props: { params: context.params }, 
  };
}

getServerSideProps is called each time I click a link (via an XHR request).

[timmysmalls]

I think I understand what the issue is from seeing this. I've seen similar behaviour now. It seems that the page component itself does not unmount when switching between pages. It just gets new props from the getStaticProps/getServerSideProps. So anything that depends on just your props will rerender correctly, and behave as expected. However, my useEffect call was configured to only run on the first render of the component will not run again unless the component is unmounted and remounted. So if you call some API endpoint in a useEffect call (like I am), this will not run again when you navigate to another page that uses the same template. You have to make the useEffect call dependent on the pathname of the router to make sure it runs again when the paths changes, otherwise you will end up with stale data. Could you do me a favour and add this to you code just to make sure this is really what's going on here, and I don't have some silly mistake lingering around somewhere:

const [valueFromUseEffect, setValueFromUseEffect] = useState(null);

useEffect( () => {
    setValueFromUseEffect(params);
}, []);

And then render another pre element with the stringified data of valueFromUseEffect underneath the one you already have.

If I'm correct it should mean that the top pre element that stringifies the params you got from props will change when you navigate to a new path, because the props will change, while valueFromUseEffect will always keep its initial value, and never change after it was first initialized, because the page component doesn't unmount, so useEffect doesn't run on any subsequent page changes.

Thanks for your help!