Next.js中Link组件快速刷新或常规刷新后跳转失效问题求助

问题原因分析 #

你遇到的是Next.js Link组件常见的客户端路由异常问题，核心原因是以下两点：

1. 动态拼接href的取值不稳定
   你用pathname拼接路由路径时，fast refresh触发组件重渲染后，useRouter()返回的pathname可能因为组件生命周期、作用域变更的问题出现异常，哪怕最终DOM上a标签的href属性看起来正常，Link组件内部用于客户端跳转的缓存href值已经出错，导致拦截跳转的逻辑不生效。
2. 旧版Link组件语法的兼容性问题
   如果你使用的是Next.js 12.2+或13+版本，嵌套a标签+passHref的旧写法在热更新后容易出现事件监听丢失的问题，Link组件绑定的点击跳转事件被销毁后没有重新挂载。

解决方案 #

• 优先使用绝对路径拼接路由，避免依赖动态pathname取值：

<Link href={`/dashboard/${slug}`} passHref>
  <a>
    <Edit className="h-4 w-4" />
  </a>
</Link>

• 若使用Next.js 13+版本，直接省略内层a标签和passHref参数，采用新版语法即可：

<Link href={`/dashboard/${slug}`}>
  <Edit className="h-4 w-4" />
</Link>

• 临时验证方案：可以在点击事件中强制走原生跳转确认是否是客户端路由的问题，验证通过后再换回Link组件：

<a href={`/dashboard/${slug}`} onClick={(e) => {
  e.preventDefault()
  window.location.href = `/dashboard/${slug}`
}}>
  <Edit className="h-4 w-4" />
</a>

内容的提问来源于stack exchange，提问作者zimmerbimmer