redirect

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

在 流式传输上下文 中使用时，这将插入一个元标记以在客户端发出重定向。在服务器操作中使用时，它将向调用方提供 303 HTTP 重定向响应。否则，它将向调用方提供 307 HTTP 重定向响应。

如果资源不存在，您可以改用 notFound 函数。

需知:

• 在服务器操作和路由处理程序中，应在 try/catch 块之后调用 redirect。
• 如果您希望返回 308 (永久) HTTP 重定向而不是 307 (临时)，则可以使用 permanentRedirect 函数。

参数

redirect 函数接受两个参数

redirect(path, type)

默认情况下，redirect 将在 服务器操作 中使用 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')
  }
 
  // ...
}

需知：redirect 不需要您使用 return redirect()，因为它使用 TypeScript never 类型。

客户端组件

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

'use client'
 
import { navigate } from './actions'
 
export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'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 重定向的信息。

版本历史