next.js 浅层路由在添加查询字符串时无法正常工作答案

【问题标题】：next.js shallow routing not working expectantly while adding a query stringnext.js 浅层路由在添加查询字符串时无法正常工作
【发布时间】：2022-01-27 20:51:03
【问题描述】：

问题：

当尝试通过更改（添加或删除不更新）Next.js 中的查询字符串来进行浅层路由时，页面将重新加载并且浅层被忽略。

如何在更改查询字符串时防止重新加载？

示例：

来自：example.com/page1/?a=2

收件人：example.com/page1/?a=2&b=3

代码：

const newSearch = '?a=2&b=3'
router.push(`/page1/${newSearch}`, null, { shallow: true })

我也试试：

const newSearch = '?a=2&b=3'
router.push(`/page1/${newSearch}`, `/page1/${newSearch}`, { shallow: true })

【问题讨论】：

在router.push 调用中传递shallow: true 只会阻止数据获取方法（getStaticProps、getServerSideProps）重新运行。它不会阻止页面重新渲染（这是无法阻止的，因为路由更改并且总是会触发重新渲染） - 但是页面不应该完全重新加载。

标签： next.js next-router

【解决方案1】：

我只是禁用了shallow，因为这是Autmatic static optimization，我意识到它可以避免查询字符串更新。它仅对我禁用浅层有效。无论如何，我看到 getServerSideProps 曾经在有/没有 shallow 的情况下运行。

【讨论】：