如何绕过Next.js单页框架特性，实现URL跳转时强制重载？

下面是几种可行的方案：

1. 替换Next.js的<Link>组件为原生<a>标签 #

Next.js默认通过<Link>组件实现无刷新的客户端路由，直接改用原生HTML的<a>标签即可触发全页重载：

// 替换前（客户端路由）
import Link from 'next/link';
<Link href="/about">关于我们</Link>

// 替换后（全页重载）
<a href="/about">关于我们</a>

2. 给Next.js的<Link>组件添加强制重载属性 #

如果不想完全替换<Link>，可以通过属性强制触发页面刷新：

• App Router（Next.js 13+）：使用reload属性

  import Link from 'next/link';
  <Link href="/about" reload>关于我们</Link>
  

• Pages Router：在onClick事件中手动触发原生跳转，或使用router.push时指定forceRefresh: true

  import Link from 'next/link';
  import { useRouter } from 'next/router';
  
  const router = useRouter();
  <Link href="/about" onClick={() => router.push('/about', undefined, { forceRefresh: true })}>关于我们</Link>
  

3. 编程式导航时使用原生API替代Next.js路由 #

如果是通过代码触发跳转（比如按钮点击事件），不用Next.js的router.push或router.replace，直接用浏览器原生的window.location：

// 替换前（客户端路由）
router.push('/about');

// 替换后（全页重载）
window.location.href = '/about';

4. 全局禁用客户端路由（进阶方案） #

如果需要彻底禁用所有客户端路由行为，可以自定义全局路由拦截逻辑，或者在_app.js（Pages Router）或layout.js（App Router）中覆盖默认路由处理，强制所有跳转走原生浏览器路由。不过这种方案需谨慎处理，可能影响Next.js的其他特性。

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