javascript - Next.js - 带有动态路由的浅路由

Question

在 Next.js 中尝试使用动态路由进行浅层路由时，页面会刷新并忽略浅层。似乎很多人对此感到困惑。
假设我们从下一页开始

router.push(
  '/post/[...slug]',
  '/post/2020/01/01/hello-world',
  { shallow: true }
);

然后我们路由到另一篇博文:

router.push(
  '/post/[...slug]',
  '/post/2020/01/01/foo-bar',
  { shallow: true }
);

这个不触发浅路由，浏览器刷新，为什么？
在代码库中，它非常清楚这是一个特性:

// 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'
}

我可以使用 window.history.pushState() 手动实现相同的效果虽然这当然是一个坏主意:

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

由于 Next.JS 的内部 API 可能随时更改......我可能会遗漏一些东西......但是为什么在这种情况下会忽略浅层？似乎很奇怪。

Answer 1

我认为这是预期的行为，因为您正在路由到新页面。如果您只是更改查询参数，浅路由应该可以工作，例如:

router.push('/?counter=10', undefined, { shallow: true })

但是您正在使用路由参数

router.push(
  '/post/[...slug]',
  '/post/2020/01/01/hello-world',
  { shallow: true }
);

这表明您正在路由到一个新页面，它会卸载当前页面，加载新页面，并等待数据获取，即使我们要求进行浅层路由，这在此处的文档中有所提及 Shallow routing caveats .
顺便说一句，您说“页面已刷新”但是 router.push即使不使用 shallow: true 也不会刷新页面.毕竟这是一个单页应用程序。它只是呈现新页面并运行 getStaticProps , getServerSideProps , 或 getInitialProps .