Next.js routing from "pages/[...slug].js" not working

Question

This is how my pages folder looks like:

pages
   index.js  
   [...slug].js

I know that the problem lies for sure in the fact that I am using catch all routes directly in the pages folder, because I tried with a "pages/page/[...slug].js structure and everything works fine.

When navigating using the Link component from the index.js page to a [...slug].js page (eg /careers or /blog), everything works fine .

BUT when navigating from a [...slug].js page (eg /contact) to another similar page (eg /blog) only the URL changes correctly, but the content of the page stays the same , so there is no rerendering.

Note: Navigating from a [...slug].js page back to the root file (href="/") works.

Answer 1

TLDR:
When returning the set of props from your getStaticProps or getServerSideProps function, return a "key" prop and assign it a unique value, so that react is able to differentiate between the two pages that are served from the same dynamic path.

I found the solution to the "problem" in github issue from last year: https://github.com/vercel/next.js/issues/9992

You can find a clear solution reading through the issue I linked.

Answer 2

Make each page its own file within your pages folder. For example, you could have:

pages/
  index.js
  contact.js
  careers.js
  blog.js

Each file should export a default function that returns JSX.