Next.js应用不使用<Link>如何动态修改URL且不刷新页面？

原来的window.top.location.href属于浏览器硬跳转，会强制重载整个页面，你可以用Next.js内置的客户端路由钩子实现无刷新跳转，无需依赖<Link>组件，根据你使用的路由模式选择对应方案即可：

解决方案 #

如果你使用的是 Pages Router（Next.js 12及更早版本默认，使用pages目录） #

从next/router导入useRouter钩子，获取路由实例后调用push方法执行跳转：

import { useRouter } from 'next/router'

// 组件内部
const router = useRouter()

useEffect(() => {
  if (status === true) {
    // 同站内路由直接写路径即可，比如 '/dashboard'
    router.push('https://www.website.com')
  }
}, [status, router])

如果你使用的是 App Router（Next.js 13及以上版本默认，使用app目录） #

从next/navigation导入useRouter钩子，调用push方法即可：

import { useRouter } from 'next/navigation'

// 组件内部
const router = useRouter()

useEffect(() => {
  if (status === true) {
    router.push('https://www.website.com')
  }
}, [status, router])

注意：如果跳转地址是和当前站点完全不同的外部域名，受浏览器安全策略限制，无论用什么方法都会触发整页重载，只有同站的Next.js应用内路由跳转才能实现无刷新切换。

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