问使用Next.js更改路由而不重新加载页面

EN

关于shallow-routing，你完全错了。浅路由适用于相同页面的URL，一般情况下，您将更新同一页的查询字符串参数，查询参数的更新值将通过router获得。

router.push('/signup/[page]', '/signup/page-1')将推送新的URL路径，并导航到与/signup/完全不同的页面。这就是为什么浅层路由不能在这里工作和state值重置的原因。

在页面目录中，/signup/[page].js和/signup/index.js是文件系统中两个完全不同的文件。如果您尝试使用浅路由在它们之间导航，它将无法工作。

溶液

您不需要像/signup/[page]这样的其他动态路由，您可以通过查询字符串更新page参数并保持相同的URL路径。在/signup/index.js页面中，您可以获得查询参数的更新值并对其进行处理。

router.push({
   pathname: '/signup',
   query: {
      pageId: "page-1"  // update the query param
   }
}, undefined, { shallow: true})


// you have access to the updated value of pageId through router.query.pageId

const currPage = router.query.pageId

忽略此任务的下一个路由器，只需使用JavaScript来更改URL -组件不会重新加载或受到影响。

window.history.pushState(null, 'Page Title', '/newUrl'); (null为stateData)。

例如：

您在用户配置文件页面localhost.com/john上，然后用id 13983单击他们的帖子。

function onPostClicked(post){
  showPost(post);
  window.history.pushState(null, 'Post by John', '/john/p/13983');
}

然后，当他们点击离开帖子时，您可以返回到原来的URL：

function onPostClosed(){
  hidePost();
  window.history.pushState(null, 'John', '/john');
}