Next.js跳转至其他页面时如何触发强制硬刷新？

以下是不同场景下的可落地方案： #

方案1：使用原生<a>标签实现硬跳转 #

原生<a>标签的默认行为就是跳转后整页硬重载，无额外逻辑成本，直接替换Next.js的<Link>组件即可：

// 替换前
// <Link href="/target-page">跳转</Link>
// 替换后
<a href="/target-page">跳转</a>

适用于跳转前不需要执行自定义逻辑的场景。

方案2：跳转完成后在目标页触发硬刷新 #

如果需要保留Next.js客户端路由跳转的能力，可在目标页面挂载时触发硬重载：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function TargetPage() {
  const router = useRouter()
  useEffect(() => {
    // 页面加载完成后触发硬重载
    router.reload()
  }, [])

  return <div>目标页面内容</div>
}

如果需要限定只有从特定来源跳转才触发重载，可以增加来源判断：

useEffect(() => {
  // 仅从 /source-page 跳转过来时触发重载
  if (document.referrer.includes('/source-page')) {
    router.reload()
  }
}, [])

方案3：跳转前手动触发硬跳转 #

如果跳转前需要执行自定义逻辑（比如参数校验、数据上报），可以直接操作window.location对象替代router.push：

import { useCallback } from 'react'

export default function SourcePage() {
  const handleJump = useCallback(() => {
    // 此处可添加跳转前的自定义逻辑
    window.location.href = '/target-page'
  }, [])

  return <button onClick={handleJump}>跳转</button>
}

效果和原生<a>标签完全一致，同时支持自定义前置逻辑。

方案4：保留<Link>组件能力的同时实现硬跳转 #

如果必须使用<Link>组件的内置能力，可以拦截点击事件阻止默认软跳转，手动触发硬跳转：

import Link from 'next/link'

export default function SourcePage() {
  const handleLinkClick = (e) => {
    e.preventDefault()
    window.location.href = e.currentTarget.href
  }

  return (
    <Link href="/target-page" onClick={handleLinkClick}>
      跳转
    </Link>
  )
}

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