使用 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。浅路由适用于同一页面 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