redirect

redirect 函数允许你将用户重定向到另一个 URL。该函数可在服务端组件 (Server Components)、路由处理器 (Route Handlers) 和服务端操作 (Server Actions) 中使用。

在流式传输上下文 (streaming context) 中使用时，该函数会插入一个 meta 标签以在客户端触发重定向。在服务端操作中使用时，会向调用方返回 303 HTTP 重定向响应。其他情况下会返回 307 HTTP 重定向响应。

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

须知:

• 在服务端操作和路由处理器中，redirect 应当在 try/catch 代码块之后调用。
• 如果需要返回 308（永久）HTTP 重定向而非 307（临时），可以使用 permanentRedirect 函数。

参数

redirect 函数接受两个参数：

redirect(path, type)

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

在服务端组件中使用时，type 参数不会产生任何效果。

返回值

redirect 不返回任何值。

示例

服务端组件

调用 redirect() 函数会抛出 NEXT_REDIRECT 错误，并终止所在路由段的渲染。

import { redirect } from 'next/navigation'

async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

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

  // ...
}

须知：由于使用了 TypeScript 的 never 类型，redirect 不需要使用 return redirect() 语法。

客户端组件

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

'use client'

import { navigate } from './actions'

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

常见问题

为什么 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 重定向的信息。

版本历史