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 错误，并终止抛出该错误的路由段的渲染。

import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const team = await fetchTeam(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 重定向的信息。

版本历史