当 next.js 路由器使用不同的查询推送相同的路由时，如何强制重新加载页面？答案

【问题标题】：How to force reload page when next.js router push the same route with different query?当 next.js 路由器使用不同的查询推送相同的路由时，如何强制重新加载页面？
【发布时间】：2022-10-13 01:12:36
【问题描述】：

我正在开发一个带有/proudct?id=xxx 路由的产品详细信息页面，当/proudct?id=1 中的用户跳转到/proudct?id=2，只有状态依赖router.query.id 发生变化，我想强制重新加载整个页面而不是更新某些状态。

【问题讨论】：

只需使用router.push(/product?id=2) 并输入useEffect 来处理id 更改，否则尝试window.location.reload()
window.location.reload() 将重新加载整个应用程序，redux 全局状态将丢失。我只想重新加载页面，比如跳转到不同的路由页面，页面组件重新加载
然后使用我建议的第一个选项 router.push + useEffect

标签： next.js next-router

【解决方案1】：

有一个即将推出但仍不稳定的功能unstable_skipClientCache: true，您可以在其中跳过客户端的缓存，请参阅下面的 sn-p。


const router = useRouter()
const { pathname, asPath, query, locale } = router

router.push(
  {
    pathname,
    query
  },
  asPath,
  {
    locale: newLocale,
    unstable_skipClientCache: true
  }
)

我将它用于我页面上的区域设置更改，因为会话取决于它。

【讨论】：

【解决方案2】：

对我有用的是这样的，但感觉不是一个好的解决方法。

router.replace({
   pathname: '/[whatever]',
   query: { param_key: param_value },
}).then(() => router.reload())

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。