Next.js中已有Link组件，为何还要使用router.push()？

在Next.js里，Link组件和router.push()都是用来跳转路由的，但适用场景完全不同，核心区别是声明式 vs 命令式：

什么时候用Link组件？ #

Link是Next.js提供的声明式路由组件，适合不需要额外逻辑，直接点击跳转的场景。它的优势是生产环境会自动预加载目标页面，提升跳转速度，写法也符合React的声明式风格。

示例：静态页面跳转

import Link from 'next/link';

export default function HomePage() {
  return (
    <nav>
      {/* 直接点击跳转到关于页 */}
      <Link href="/about">关于我们</Link>
      {/* 动态路由跳转，as参数指定实际路径 */}
      <Link href="/posts/[postId]" as="/posts/456">查看文章456</Link>
    </nav>
  );
}

什么时候用router.push()？ #

router.push()是命令式的路由方法，适合需要先执行一段代码逻辑，再触发跳转的场景——比如表单提交成功后、异步操作完成后、满足某个条件时才跳转。

示例1：表单提交成功后跳转 #

'use client'; // 客户端组件必须加这个指令
import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 模拟登录请求
    const formData = new FormData(e.target);
    const response = await fetch('/api/login', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      // 登录成功后，命令式跳转到控制台页面
      router.push('/dashboard');
    } else {
      alert('登录失败，请检查账号密码');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="输入邮箱" required />
      <input type="password" name="password" placeholder="输入密码" required />
      <button type="submit">登录</button>
    </form>
  );
}

示例2：执行前置逻辑后跳转 #

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

export default function SaveSettingsButton() {
  const router = useRouter();

  const saveAndRedirect = () => {
    // 先保存用户的主题设置到本地存储
    localStorage.setItem('app-theme', 'dark');
    // 保存完成后跳转到设置页面
    router.push('/user/settings');
  };

  return (
    <button onClick={saveAndRedirect}>保存设置并返回</button>
  );
}

总结 #

• 要是页面上的静态链接、按钮，点了就跳，直接用Link组件，简单还能享受到预加载的性能优势。
• 要是得先做点事儿（比如发请求、存数据、判断条件）再跳转，那就用router.push()，灵活控制跳转时机。

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