redirect

redirect 函数允许你将用户重定向到另一个 URL。redirect 可以在 服务器组件、路由处理程序 和 服务器操作 中使用。

在 流式上下文 中使用时，该函数会插入一个 meta 标签，在客户端执行重定向。在服务器操作中使用时，它会向调用者返回一个 303 HTTP 重定向响应。否则，它会返回一个 307 HTTP 重定向响应。

如果某个资源不存在，你可以使用 notFound 函数 代替。

需要了解 :

• 在服务器操作和路由处理程序中，redirect 应在 try/catch 代码块后调用。
• 如果你更喜欢返回 308（永久）HTTP 重定向而不是 307（临时），你可以使用 permanentRedirect 函数 代替。

参数

redirect 函数接受两个参数：

redirect(path, type)

默认情况下，redirect 在 服务器操作 中使用 push（在浏览器历史记录堆栈中添加新条目），在其他地方使用 replace（在浏览器历史记录堆栈中替换当前 URL）。你可以通过指定 type 参数覆盖此行为。

在服务器组件中使用时，type 参数无效。

返回值

redirect 不返回值。

示例

服务器组件

调用 redirect() 函数会抛出一个 NEXT_REDIRECT 错误，并终止引发该错误的路由段的渲染。

// app/team/[id]/page.js

import { redirect } from 'next/navigation';

async function fetchTeam(id) {
  const res = await fetch('example.com
  if (!res.ok) return undefined;
  return res.json();
}

export default async function Profile({ params }) {
  const team = await fetchTeam(params.id);
  if (!team) {
    redirect('/login');
  }
  // ...
}

了解一下: redirect 不需要你使用 return redirect()，因为它使用了 TypeScript 的 never 类型。

客户端组件

redirect 可以通过服务器操作在客户端组件中使用。如果你需要通过事件处理程序重定向用户，可以使用 useRouter 钩子。

// app/client-redirect.tsx

'use client';

import { navigate } from './actions';

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  );
}

// app/actions.ts

'use server';

import { redirect } from 'next/navigation';

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`);
}

常见问题

为什么 redirect 使用 307 和 308?

当使用 redirect() 时，你可能会注意到状态码使用的是 307（临时重定向）和 308（永久重定向）。虽然传统上 302 被用作临时重定向，301 被用作永久重定向，但许多浏览器在使用 302 时会将重定向的请求方法从 POST 更改为 GET，无论原始请求方法是什么。

例如，从 /users 重定向到 /people，如果你对 /users 发起 POST 请求以创建新用户，并且遵循 302 临时重定向的规定，重定向后的请求方法将从 POST 更改为 GET。这没有意义，因为要创建新用户，你应该向 /people 发起 POST 请求，而不是 GET 请求。

引入 307 状态码意味着请求方法将保持为 POST。

• 302 - 临时重定向，将请求方法从 POST 更改为 GET
• 307 - 临时重定向，将请求方法保持为 POST

redirect() 方法默认使用 307，而不是 302 临时重定向，这意味着你的请求将 始终 保持为 POST 请求。

了解更多 有关 HTTP 重定向的信息。

版本历史