#StackBounty: #javascript #reactjs #routes #next.js #server-side-rendering Next.js – Shallow routing with dynamic routes

Bounty: 350

When attempting shallow routing with a dynamic route in Next.js the page is refreshed and shallow ignored. Seems allot 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 refreshes, why?

In the codebase its very clear that this is a feature:

// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
// as this should not go into the history (That's how browsers work)
// We should compare the new asPath to the current asPath, not the url
if (!this.urlIsNew(as)) {
  method = 'replaceState'
}

I can achieve the same manually using window.history.pushState() although this would of course be a bad idea:

window.history.pushState({
  as: '/post/2020/01/01/foo-bar',
  url: '/post/[...slug]',
  options: { shallow: true }
}, '', '/post/2020/01/01/foo-bar');

As the internal API of Next.JS could change at anytime… I may be missing something… but why is shallow ignored in the case? Seems odd.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.