javascript - 使用 Next.js 无需重新加载页面即可更改路线

Question

每当用户单击继续按钮时，就会触发一个函数，在该函数中，我调用:push("/signup/page-2", undefined, { shallow: true });所有看起来像 /signup/[page].js 的动态路由返回 <Component />我也有/signup/index.js返回 <Component />问题是:
每次重新加载页面并清除所有状态 push("/signup/page-2", undefined, { shallow: true });叫做。
还值得一提的是，这个应用程序是一个带有 react-router-dom 应用程序的 CRA 转换为 next.js 应用程序

Answer 1

你对 shallow-routing 全错了.浅层路由适用于 同页网址 通常，您将更新同一页面的查询字符串参数，并且查询参数的更新值将通过router 获得。 .router.push('/signup/[page]', '/signup/page-1')将推送新的 URL 路径并将导航到与 /signup/ 完全不同的页面.这就是为什么浅路由在这里不起作用的原因和 state值重置。
在页面目录 /signup/[page].js和 /signup/index.js是文件系统中两个完全不同的文件。如果您尝试使用浅路由在它们之间导航，它将不起作用。
解决方案
您不需要像 /signup/[page] 这样的另一个动态路由在这里，您可以更新 page param 通过查询字符串并保持相同的 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