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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With