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

【问题标题】：Change route without reloading page with Next.js使用 Next.js 更改路由而不重新加载页面
【发布时间】：2020-06-30 12:53:17
【问题描述】：

每当用户点击继续按钮时，就会触发一个函数，并在该函数中调用：

push("/signup/page-2", undefined, { shallow: true });

所有看起来像 /signup/[page].js 的动态路由返回 <Component />

我还有一个/signup/index.js，它返回<Component />

问题是：

每次调用push("/signup/page-2", undefined, { shallow: true }); 时，页面都会重新加载并清除所有状态。

还值得一提的是，这个应用是一个 CRA，带有 react-router-dom 应用，被转换为 next.js 应用

【问题讨论】：

为什么不直接使用来自react-router-dom 的history.push？我在所有应用程序中都使用了它，并且页面不会在路由更改时重新加载。
这是一个 next.js 应用程序

标签： javascript reactjs next.js

【解决方案1】：

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

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

pages目录中/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

【讨论】：

很好的解释。但如果我这样做。它将重新渲染该路线上的每个组件。我不想要。
同样，它仍然重新渲染页面和所有组件

【解决方案2】：

忽略此任务的下一个路由器，只需使用 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');
}

【讨论】：