使用Next.js在不重新加载页面的情况下更改路由

Question

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

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

所有动态路由都像这样：`/signup/[page].js`，它返回 ``。

我还有一个 `/signup/index.js`，它返回 ``。

问题是：

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

值得一提的是，这个应用程序最初是一个使用 react-router-dom 的 CRA，然后将其转换为 next.js 应用程序。

- Akin Aguda

---

为什么不直接使用react-router-dom中的history.push呢？我在所有的应用程序中都使用它，页面在路由更改时不会重新加载。 - Michael

这是一个 Next.js 应用程序。 - Akin Aguda

Answer 1

你对浅层路由的理解完全错误。浅层路由适用于相同页面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

- subashMahapatra

---

很好的解释。但是如果我这样做，它会重新渲染该路由上的每个组件，而我不想要这种情况。 - Monzoor Tamal

一样的，它仍然重新渲染页面和所有组件。 - Kalden

我觉得是 useEffect 导致了我的问题。看起来只有与 useEffect 更新绑定的组件才会刷新。我在实现类似 Asana 的列表视图和详细视图设置时遇到了困难。 - Mike Bourbeau

Answer 2

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

window.history.pushState(null, '页面标题', '/新的网址'); （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');
}

- August Kimo

---

这太完美了，非常感谢！！当想要打开模态框并更改URL以供用户复制，但实际上不重定向用户时，它的效果很好。 - Julius

谢谢。我在想这是否是正确的方法，结果是的。 - undefined