如何让Next.js的Link组件实现普通a标签的全页刷新行为

默认Next.js的Link组件走客户端路由复用页面实例，不会触发整页重载，你引入的第三方电商JS依赖页面加载事件完成初始化，路由切换时没有重新执行初始化逻辑，就会出现异常。以下是两种可行的解决方法：

方法1：修改Link组件行为，强制触发原生全页刷新 #

符合Next.js语法规范，不会触发编译报错，跳转效果和原生a标签完全一致：

Pages Router（旧版本）写法 #

<Link href={`/event/${event.slug}`}>
  <a 
    className="event-card"
    onClick={(e) => {
      // 阻止默认的客户端路由跳转
      e.preventDefault()
      // 调用浏览器原生跳转逻辑，触发整页刷新
      window.location.href = e.currentTarget.href
    }}
  >
    <img
      className="img-fluid"
      alt={event.name}
      src={event.event_main_image ? event.event_main_image : defaultEventImg}
    />
  </a>
</Link>

App Router（Next.js 13+）写法 #

App Router模式下Link无需嵌套a标签，直接添加点击事件即可：

<Link 
  href={`/event/${event.slug}`}
  className="event-card"
  onClick={(e) => {
    e.preventDefault()
    window.location.href = e.currentTarget.href
  }}
>
  <img
    className="img-fluid"
    alt={event.name}
    src={event.event_main_image ? event.event_main_image : defaultEventImg}
  />
</Link>

方法2：保留原生a标签，屏蔽编译报错 #

如果不想修改跳转逻辑，可通过eslint规则屏蔽a标签的编译报错：

• 单文件临时忽略：在a标签上方加忽略注释即可

{/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
<a href={`/event/${event.slug}`} className="event-card">
  <img
    className="img-fluid"
    alt={event.name}
    src={event.event_main_image ? event.event_main_image : defaultEventImg}
  />
</a>

• 全局关闭校验：在项目根目录的.eslintrc.json中添加如下规则

{
  "rules": {
    "@next/next/no-html-link-for-pages": "off"
  }
}

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