Next.js 提供客户端导航，速度比完整页面重新加载更快——它只获取新页面的数据/组件并将其交换进去，同时保持共享布局挂载。
Link 组件（声明式）
tsx
;
() {
(
);
}
Next.js 提供客户端导航，速度比完整页面重新加载更快——它只获取新页面的数据/组件并将其交换进去，同时保持共享布局挂载。
;
() {
(
);
}
<Link> 渲染一个 <a> 但拦截点击以进行客户端导航。至关重要的是，当链接进入视口时，它预加载链接的路由，因此导航感觉是即时的。
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
当导航必须响应逻辑（在表单提交后、登录等）而不是点击链接时，使用 useRouter。
<Link> 在你点击之前预加载路由。在 App Router 中，hooks 来自 next/navigation（useRouter、usePathname、useSearchParams）— 不是旧的 next/router（仅用于 Pages Router）。混淆它们是常见错误。
<Link>（具有自动预加载）和 useRouter 是构建 Next.js 以其闻名的快速、类 SPA 导航的方式。
使用它们而不是普通 <a href>（强制完整重新加载）是保持应用响应迅速并保留布局状态的原因。