redirect
redirect
函数允许你将用户重定向到另一个 URL。redirect
可用于 服务器组件、路由处理器和 服务器操作。
在 流式处理上下文 中使用时,这将插入一个 meta 标签以在客户端发出重定向。在服务器操作中使用时,它将向调用者提供 303 HTTP 重定向响应。否则,它将向调用者提供 307 HTTP 重定向响应。
如果资源不存在,你可以使用 notFound
函数 代替。
须知:
- 在服务器操作和路由处理器中,
redirect
应该在try/catch
代码块之后调用。- 如果你更喜欢返回 308(永久)HTTP 重定向而不是 307(临时),你可以使用
permanentRedirect
函数 代替。
参数
redirect
函数接受两个参数
redirect(path, type)
参数 | 类型 | 描述 |
---|---|---|
path | string | 要重定向到的 URL。可以是相对或绝对路径。 |
type | 'replace' (默认) 或 'push' (服务器操作中的默认) | 要执行的重定向类型。 |
默认情况下,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()
,因为它使用了 TypeScriptnever
类型。
客户端组件
redirect
可以直接在客户端组件中使用。
'use client'
import { redirect, usePathname } from 'next/navigation'
export function ClientRedirect() {
const pathname = usePathname()
if (pathname.startsWith('/admin') && !pathname.includes('/login')) {
redirect('/admin/login')
}
return <div>Login Page</div>
}
须知:在服务器端渲染 (SSR) 期间的初始页面加载时在客户端组件中使用
redirect
时,它将执行服务器端重定向。
redirect
可以通过服务器操作在客户端组件中使用。如果你需要使用事件处理程序来重定向用户,你可以使用 useRouter
Hook。
'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 重定向。
版本历史
版本 | 变更 |
---|---|
v13.0.0 | 引入了 redirect 。 |
这有帮助吗?