NextJS Shallow Routing on Dynamic Routes doesn't work

userLMBB 0
Viewed 89

If I have a /posts folder in NextJS with a index.js and [id].js file, then this shallow routing will work in the index.js file:

router.push("/posts", "/posts/" + id, {shallow: true})

BUT if I instead have a /dynamic-posts folder containing no index.js but e.g. a [category].js file and no [id].js but instead /post/[id].js then this shallow routing doesn't work:

router.push("/dynamic-post/" + something, "/dynamic-posts/post/" + id, {shallow: true})

Does anyone know how to fix it? I need a dynamic page for SEO to rank on cities for a webportal similar to Zillow. E.g: https://www.zillow.com/san-francisco-ca/rent-houses/

I made a demo of my issue on Stackblitz here: https://stackblitz.com/edit/nextjs-ezyusx?file=pages/index.js

next.js
1 Answers

I found a solution, I can just use window.history.pushState() instead of using the Nextjs router.

Then I can cosmetically change the URL without causing any redirects or refreshes

userLMBB0
Related