Next.js - Shallow routing with dynamic routes

tux_tina

When attempting shallow routing with a dynamic route in Next.js the page is refreshed and shallow ignored. Seems a lot of people are confused about this. Say we start on the following page router.push( '/post/[...slug]', '/post/2020/01/01/hello-world', { shallow: true } ); Then we route to another blog post: router.push( '/post/[...slug]', '/post/2020/01/01/foo-bar', { shallow: true } ); This does not trigger shallow routing, the browser...

Originally asked by AndrewMcLagan on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

I think this is the expected behavior because you are routing to a new page. If you are just changing the query parameters shallow routing should work for example: router.push('/?counter=10', undefined, { shallow: true }) but you are using route parameters router.push( '/post/[...slug]', '/post/2020/01/01/hello-world', { shallow: true } ); That indicates you are routing to a new page, it'll unload the current page, load the new one, and wait for data fetching even though we asked to do shallow routing and this is mentioned in the docs here Shallow routing caveats . By the way, you say "the page is refreshed" but router.push doesn't refresh the page even when used without shallow: true ....

Full answer by Ahmed Mokhtar: https://stackoverflow.stackexchange.com/a/62943033 (CC BY-SA 4.0).

Need it done for your business? UphillTech.