Shallow routing with dynamic routes: [...slug]

[andrewmclagan]

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.

[franknoel]

I have the same issue on my end, would be nice to know what's the best practice here.

[TommySorensen]

You can only use shallow routing to the same page under the pages folder. I can't see if you are trying to shallow from a slug page to a different page? Please provide a bit more information.

[franknoel]

I wonder if this is an issue with the dynamic routes or if we're missing something.

[andrewmclagan]

It is a clear decision made by the Next team, if you look through the codebase (and my initial post above) you can see notes. I'm simply wondering why this has decision has been made?

[franknoel]

I'm also wondering. It would make sense for the page to reload if the as prop is missing. However, if the as prop is equal to the query and the href prop provide the same dynamic page, it should work.

[andrewmclagan]

Exactly my thoughts.

[DavidChouinard]

Any hope of a PR? 🙏

[sahinaksoy]

@andrewmclagan i'm tired your solution, its worked. Thanks

[andrewmclagan]

It's not really a solution. I would hesitate to use it as it depends upon internals of Next.js not changing. It will break.

[franknoel]

He can still stay on that release until the Next.js team fix this (if they ever do).

[andrewmclagan]

Its true, although if you want a stable build you never know when someone in your team decides its time to upgrade -- it's too easy to forget these things.

[DavidChouinard]

Also having this issue and it's quite jarring in our application — how bad is using window.history.pushState() as a stop gap?

[illuminist]

https://codesandbox.io/s/zen-pine-b3556

It works fine. Notice that getInitialProps doesn't run when routing with shallow option and props still is props from last time getInitialProps result.

Edit, didn't notice that this is the old discussion.