Next.js如何不使用<Link>实现类似useNavigate()的即时重定向？

Next.js中不需要依赖<Link>组件也能实现立即路由跳转，对应React Router的useNavigate功能，核心是根据你使用的路由模式（Pages Router / App Router）选择对应的API：

一、Pages Router（Next.js 12及更早版本） #

使用next/router提供的useRouter钩子，通过push或replace方法实现跳转：

核心用法 #

• router.push(path)：添加新路由到历史栈，跳转后可返回上一页
• router.replace(path)：替换当前路由在历史栈中的记录，跳转后无法返回上一页

示例代码 #

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function ProfilePage() {
  const router = useRouter();

  // 组件挂载后立即重定向到登录页（未登录时）
  useEffect(() => {
    if (!isUserLoggedIn()) {
      router.replace('/login');
    }
  }, []);

  // 退出登录后跳转首页
  const handleLogout = () => {
    clearAuthToken();
    router.push('/');
  };

  return (
    <div>
      <h1>个人中心</h1>
      <button onClick={handleLogout}>退出登录</button>
    </div>
  );
}

服务器端场景（getServerSideProps/getStaticProps） #

如果需要在服务器端数据获取阶段立即重定向，直接使用res.redirect：

export async function getServerSideProps(context) {
  const { req, res } = context;
  const user = await getUserFromCookie(req);

  if (!user) {
    // 307为临时重定向，308为永久重定向
    res.redirect(307, '/login');
    return { props: {} };
  }

  return { props: { user } };
}

二、App Router（Next.js 13+） #

App Router分为客户端组件和服务器组件，跳转方式略有不同：

1. 客户端组件（需加'use client'指令） #

使用next/navigation提供的useRouter钩子，API和Pages Router类似：

'use client'; // 必须声明为客户端组件
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

function DashboardPage() {
  const router = useRouter();

  // 页面加载后自动跳转到通知页（有未读通知时）
  useEffect(() => {
    const hasUnreadNotification = checkUnreadNotifications();
    if (hasUnreadNotification) {
      router.push('/notifications');
    }
  }, []);

  // 表单提交成功后跳转结果页
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    await saveFormData(e.target);
    router.replace('/submit-success');
  };

  return (
    <form onSubmit={handleFormSubmit}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
    </form>
  );
}

2. 服务器组件 #

服务器组件无法使用useRouter，直接用next/navigation提供的redirect函数实现立即重定向：

import { redirect } from 'next/navigation';

async function ProtectedPage() {
  const user = await fetchCurrentUser();
  
  // 未登录则立即重定向到登录页
  if (!user) {
    redirect('/login');
  }

  return (
    <div>
      <h1>受保护内容</h1>
      {/* 页面内容 */}
    </div>
  );
}

API路由中的重定向 #

在App Router的API路由中，同样使用Response.redirect：

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const token = searchParams.get('token');
  
  if (!token) {
    return Response.redirect(new URL('/error', request.url), 307);
  }

  // 处理逻辑...
  return Response.json({ success: true });
}

关键区别说明 #

• push vs replace：前者保留历史记录，适合普通跳转；后者替换当前记录，适合登录、表单提交等场景，避免用户返回重复操作
• 服务器端重定向：在服务器组件或数据获取函数中使用redirect/res.redirect，会在服务器直接返回重定向响应，比客户端跳转更高效

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