每当用户单击继续按钮时,就会触发一个函数,在该函数中,我调用: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 应用程序
最佳答案
你对 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
关于javascript - 使用 Next.js 无需重新加载页面即可更改路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62657924/