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 错误，并终止引发该错误的路由段的渲染。
// app/team/[id]/page.js 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 钩子。
// 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 重定向的信息。
版本历史
| 版本 | 变更 |
|---|---|
v13.0.0 |
引入了 redirect。 |
