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

user_13508647 0
Viewed 2456

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 (e.g. /careers or /blog), everything works fine.

BUT when navigating from a [...slug].js page (e.g. /contact) to another similar page (e.g. /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.

next.js reactjs javascript
2 Answers

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.

user_135086470

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.

user_137958090
Related