Next.js 路由导航

四种页面跳转方式：

1. Link 组件（推荐）

import Link from 'next/link'

<Link href="/about">跳转到 About</Link>
<Link href="/user/123">用户 123</Link>
<Link href="/about" scroll={false}>跳转但不滚动到顶部</Link>

• 自动预取（prefetch）可见链接
• 客户端导航，不刷新整页

2. useRouter（客户端）

'use client'
import { useRouter } from 'next/navigation'

const router = useRouter()
router.push('/about')        // 跳转
router.replace('/about')     // 替换（不产生历史记录）
router.back()                // 返回
router.refresh()             // 刷新当前页

3. redirect（服务端）

// 服务端组件 / Server Action 中使用
import { redirect } from 'next/navigation'

redirect('/login')  // 服务端重定向

4. <a> 标签（不推荐）

<a href="/about">跳转</a>  <!-- 整页刷新，不用 -->

对比

方式	场景	刷新
<Link>	页面间跳转	否
useRouter	事件触发跳转	否
redirect	服务端重定向	否
<a>	外部链接	是