|
| 1 | +--- |
| 2 | +source-updated-at: 2025-05-16T04:52:11.000Z |
| 3 | +translation-updated-at: 2025-05-21T19:11:37.018Z |
| 4 | +title: 应用路由 (App Router) |
| 5 | +description: 在 Next.js 和 React 中使用最新的应用路由 (App Router) 功能,包括布局 (Layouts)、服务端组件 (Server Components)、Suspense 等特性。 |
| 6 | +--- |
| 7 | + |
| 8 | +Next.js 应用路由 (App Router) 引入了一种新的应用构建模式,支持 React 最新功能如 [服务端组件 (Server Components)](/docs/app/building-your-application/rendering/server-components)、[Suspense 流式渲染 (Streaming with Suspense)](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) 和 [服务端操作 (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)。 |
| 9 | + |
| 10 | +通过 [创建第一个页面](/docs/app/building-your-application/routing/pages-and-layouts) 开始使用应用路由 (App Router)。 |
| 11 | + |
| 12 | +## 常见问题 |
| 13 | + |
| 14 | +### 如何在布局中访问请求对象? |
| 15 | + |
| 16 | +出于设计考虑,您无法直接访问原始请求对象。但可以通过服务端专用函数访问 [`headers`](/docs/app/api-reference/functions/headers) 和 [`cookies`](/docs/app/api-reference/functions/cookies)。您也可以 [设置 cookies](#如何设置-cookies)。 |
| 17 | + |
| 18 | +[布局 (Layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) 不会重新渲染。它们可以被缓存并在页面间导航时复用,以避免不必要的计算。通过限制布局访问原始请求,Next.js 可以防止在布局中执行可能影响性能的耗时用户代码。 |
| 19 | + |
| 20 | +这种设计还确保了不同页面间布局行为的一致性和可预测性,简化了开发和调试流程。 |
| 21 | + |
| 22 | +根据您构建的 UI 模式,[并行路由 (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) 允许您在同一个布局中渲染多个页面,这些页面可以访问路由段和 URL 查询参数。 |
| 23 | + |
| 24 | +### 如何在页面中访问 URL? |
| 25 | + |
| 26 | +默认情况下,页面是服务端组件 (Server Components)。您可以通过 [`params`](/docs/app/api-reference/file-conventions/page#params-optional) 属性访问路由段,通过 [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) 属性访问 URL 查询参数。 |
| 27 | + |
| 28 | +如果使用客户端组件 (Client Components),可以使用 [`usePathname`](/docs/app/api-reference/functions/use-pathname)、[`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) 和 [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) 来处理更复杂的路由。 |
| 29 | + |
| 30 | +此外,根据您构建的 UI 模式,[并行路由 (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) 允许您在同一个布局中渲染多个页面,这些页面可以访问路由段和 URL 查询参数。 |
| 31 | + |
| 32 | +### 如何从服务端组件重定向? |
| 33 | + |
| 34 | +您可以使用 [`redirect`](/docs/app/api-reference/functions/redirect) 将页面重定向到相对或绝对 URL。[`redirect`](/docs/app/api-reference/functions/redirect) 是临时重定向 (307),而 [`permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) 是永久重定向 (308)。当在流式渲染 UI 时使用这些函数,它们会插入 meta 标签在客户端触发重定向。 |
| 35 | + |
| 36 | +### 如何在应用路由中处理身份验证? |
| 37 | + |
| 38 | +以下是支持应用路由 (App Router) 的常见身份验证方案: |
| 39 | + |
| 40 | +- [NextAuth.js](https://next-auth.js.org/configuration/nextjs#in-app-router) |
| 41 | +- [Clerk](https://clerk.com/docs/quickstarts/nextjs) |
| 42 | +- [Lucia](https://lucia-auth.com/getting-started/nextjs-app) |
| 43 | +- [Auth0](https://github.com/auth0/nextjs-auth0#app-router) |
| 44 | +- [Stytch](https://stytch.com/docs/example-apps/frontend/nextjs) |
| 45 | +- [Kinde](https://kinde.com/docs/developer-tools/nextjs-sdk/) |
| 46 | +- 或手动处理会话或 JWT |
| 47 | + |
| 48 | +### 如何设置 cookies? |
| 49 | + |
| 50 | +您可以在 [服务端操作 (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies) 或 [路由处理器 (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) 中使用 [`cookies`](/docs/app/api-reference/functions/cookies) 函数设置 cookies。 |
| 51 | + |
| 52 | +由于 HTTP 不允许在流式传输开始后设置 cookies,因此无法直接在页面或布局中设置 cookies。您也可以通过 [中间件 (Middleware)](/docs/app/building-your-application/routing/middleware#using-cookies) 设置 cookies。 |
| 53 | + |
| 54 | +### 如何构建多租户应用? |
| 55 | + |
| 56 | +如果您需要构建一个服务于多个租户的 Next.js 应用,我们提供了 [示例项目](https://vercel.com/templates/next.js/platforms-starter-kit) 展示推荐架构。 |
| 57 | + |
| 58 | +### 如何使应用路由缓存失效? |
| 59 | + |
| 60 | +Next.js 有多层缓存机制,因此有多种方式来使不同部分的缓存失效。[了解更多缓存机制](/docs/app/building-your-application/caching)。 |
| 61 | + |
| 62 | +### 是否有基于应用路由的开源完整应用示例? |
| 63 | + |
| 64 | +有的。您可以查看 [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce) 或 [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit),这是两个使用应用路由 (App Router) 的大型开源示例。 |
| 65 | + |
| 66 | +## 了解更多 |
| 67 | + |
| 68 | +- [路由基础](/docs/app/building-your-application/routing) |
| 69 | +- [数据获取、缓存与重新验证](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) |
| 70 | +- [表单与数据变更](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) |
| 71 | +- [缓存机制](/docs/app/building-your-application/caching) |
| 72 | +- [渲染基础](/docs/app/building-your-application/rendering) |
| 73 | +- [服务端组件](/docs/app/building-your-application/rendering/server-components) |
| 74 | +- [客户端组件](/docs/app/building-your-application/rendering/client-components) |
0 commit comments