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

无需更改Next.js即可更改路线而无需重新加载页面

1 个答案: