Redirecting
This note records things about Redirecting.
重定向函数
| API | 目的 | 哪里 | 状态码 |
|---|---|---|---|
redirect | 在发生突变或事件后重定向用户 | 服务器组件、服务器操作、路由处理程序 | 307（临时）或 303（服务器操作） |
permanentRedirect | 在发生突变或事件后重定向用户 | 服务器组件、服务器操作、路由处理程序 | 308 （永久） |
useRouter | 执行客户端导航 | 客户端组件中的事件处理程序 | 不适用 |
redirects in next.config.js | 根据路径重定向传入请求 | next.config.js 文件 | 307（临时）或 308（永久） |
NextResponse.redirect | 根据条件重定向传入请求 | 中间件 | 任何 |
Redirect
该 redirect 函数允许您将用户重定向到另一个 URL。您可以调用 redirect 服务器组件、路由处理程序和服务器操作。
redirect 通常在突变或事件后使用。例如，创建帖子：
'use server'
import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'
export async function createPost(id: string) {
try {
// Call database
} catch (error) {
// Handle errors
}
revalidatePath('/posts') // Update cached posts
redirect(`/post/${id}`) // Navigate to the new post page
}Tips
edirect默认情况下返回 307（临时重定向）状态代码。在服务器操作中使用时，它会返回 303（请参阅其他），该 303 通常用于由于 POST 请求而重定向到成功页面。redirect内部抛出错误，因此应在try/catch块外部调用它。redirect可以在呈现过程中在客户端组件中调用，但不能在事件处理程序中调用。您可以改用useRouter钩子。redirect也接受 URL，可用于重定向到外部链接。- 如果要在渲染过程之前进行重定向，请使用
next.config.js或中间件。
PermanentRedirect
permanentRedirect 函数允许您将用户永久重定向到另一个 URL。您可以调用 permanentRedirect 服务器组件、路由处理程序和服务器操作。 permanentRedirect 通常在更改实体规范 URL 的突变或事件后使用，例如在用户更改用户名后更新用户的个人资料 URL：
'use server'
import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'
export async function updateUsername(username: string, formData: FormData) {
try {
// Call database
} catch (error) {
// Handle errors
}
revalidateTag('username') // Update all references to the username
permanentRedirect(`/profile/${username}`) // Navigate to the new user profile
}Tips:
permanentRedirect默认情况下返回 308（永久重定向）状态代码。permanentRedirect也接受 URL，可用于重定向到外部链接。
useRouter()
如果需要在客户端组件的事件处理程序内进行重定向，则可以使用 useRouter 挂钩 push 中的方法。例如：
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}Tips:
- 如果不需要以编程方式导航用户，则应使用
<Link>组件。
next.config.js
next.config.js 文件中的 redirects 选项允许您将传入请求路径重定向到其他目标路径。当您更改页面的 URL 结构或拥有提前已知的重定向列表时，这很有用。
redirects 支持路径、标头、Cookie 和查询匹配，使您可以灵活地根据传入请求重定向用户。
要使用 redirects ，请将选项添加到您的 next.config.js 文件中：
module.exports = {
async redirects() {
return [
// Basic redirect
{
source: '/',
destination: '/dashboard',
permanent: true,
}
]
},
}Tips:
redirects可以使用该permanent选项返回 307（临时重定向）或 308（永久重定向）状态代码。redirects可能对平台有限制。例如，在 Vercel 上，重定向限制为 1,024 个。若要管理大量重定向 （1000+），请考虑使用中间件创建自定义解决方案。有关详细信息，请参阅大规模管理重定向。redirects在中间件之前运行。
warning
- 谨慎使用
permanent选项，它会使客户端记住该重定向缓存，即使以后再构建时取消了改重定向，记住缓存的客户端仍然会发生重定向事件。
Redirect In MiddleWare
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，使用 NextResponse.redirect .如果要根据条件（例如身份验证、会话管理等）重定向用户或具有大量重定向，这将非常有用。
例如，要将用户重定向到未通过身份验证的 /login 页面，请执行以下操作：
import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'
export function middleware(request: NextRequest) {
const isAuthenticated = authenticate(request)
// If the user is authenticated, continue as normal
if (isAuthenticated) {
return NextResponse.next()
}
// Redirect to login page if not authenticated
return NextResponse.redirect(new URL('/login', request.url))
}
export const config = {
matcher: '/dashboard/:path*',
}Tips:
- 中间件在渲染之后
redirectsnext.config.js和渲染之前运行。
路由组
在 Next.js 中，app 目录中的嵌套文件夹通常映射到 URL 路径。这意味着如果你在 app 目录中创建了一个文件夹，该文件夹的名称会成为 URL 的一部分。但是，你可以将文件夹标记为路由组，这样该文件夹的名称就不会包含在 URL 路径中。
这允许您将路由段和项目文件组织到逻辑组中，而不会影响 URL 路径结构
约定
可以通过将文件夹的名称括在括号中来创建路由组： (folderName)
例子
若要在不影响 URL 的情况下组织路由，请创建一个组以将相关路由保持在一起。括号中的文件夹将从 URL 中省略（例如 (marketing) 或 (shop) ）。
即使路由内部 (marketing) 并 (shop) 共享相同的 URL 层次结构，您也可以通过在其文件夹中添加 layout.js 文件来为每个组创建不同的布局。
将特定区段选择到布局中
要选择将特定路由添加到布局中，请创建一个新的路由组（例如 (shop) ），并将共享相同布局的路由移动到该组中（例如 account 和 cart ）。组外的路由不会共享布局 ， 例如 checkout
多个根布局
要创建多个根布局，请删除顶级 layout.js 文件，然后在每个路由组中添加一个 layout.js 文件。这对于将应用程序划分为具有完全不同 UI 或体验的部分非常有用。 <html> 需要将 and <body> 标记添加到每个根布局中。
版权所有
版权归属：