# Next.js 应用程序路由器模式 ## 概述 App Router 是 Next.js 基于文件系统的路由器，构建于 React Server 组件之上。它使用“app/”目录结构，其中文件夹定义路由，特殊文件控制 UI 行为。 ## 核心文件约定 ### 路线文件每个路线段由一个文件夹定义。文件夹中的特殊文件控制行为：文件 |目的 ---|--- `page.tsx` |路线的独特 UI，使路线可公开访问 `layout.tsx` |共享 UI 包装器，保留导航状态 `loading.tsx` |使用 React Suspense 加载 UI `error.tsx` |路线段的误差边界 `未找到.tsx` | 404 响应的 UI `模板.tsx` |类似于布局，但在导航上重新呈现 `默认.tsx` |并行路线的后备 ### 文件夹约定图案|目的|示例 ---|---|--- `文件夹/` |路线段 | `应用程序/博客/`→`/博客` `[文件夹]/` |动态段| `app/blog/[slug]/` → `/blog/:slug` `[...文件夹]/` |包罗万象的细分市场 | `app/docs/[...slug]/` → `/docs/*` `[[...文件夹]]/` |可选包罗万象 | `app/shop/[[...slug]]/` → `/shop` 或 `/shop/*` `（文件夹）/` |路由组（无 URL）| `app/（营销）/about/` → `/about` `@folder/` |命名槽（并行路由）| `应用程序/@modal/登录/` `_folder/` |私人文件夹（不含）| `应用程序/_组件/` ## 创建路线 ### 基本路由结构要创建新路由，请添加带有“page.tsx”的文件夹：应用程序/ ├── page.tsx # / (首页) ├── 关于/ │ └── page.tsx # /about └── 博客/ ├── page.tsx # /blog └── [鼻涕虫]/ └── page.tsx # /blog/:slug ### 页面组件默认情况下，页面是一个服务器组件： // 应用程序/about/page.tsx 导出默认函数 AboutPage() { 返回（ <主要>

关于我们

欢迎来到我们公司。

） } ### 动态路由通过“params”属性访问路由参数： // 应用程序/博客/[slug]/page.tsx 接口 PageProps { 参数： Promise<{ slug: string }> } 导出默认异步函数 BlogPost({ params }: PageProps) { const { slug } = 等待参数 const post = 等待 getPost(slug) 返回<文章>{post.content} } ## 布局 ### 根布局（必需）每个应用程序都需要一个带有“”和“”的根布局： // 应用程序/layout.tsx 导出默认函数 RootLayout({ 孩子们， }：{ 子级：React.ReactNode }) { 返回（ {孩子} ） } ### 嵌套布局布局包装他们的孩子并保留状态： // 应用程序/仪表板/layout.tsx 导出默认函数 DashboardLayout({ 孩子们， }：{ 子级：React.ReactNode }) { 返回（

<侧边栏/>

{子项}

） } ## 加载和错误状态 ### 加载用户界面使用 Suspense 创建即时加载状态： // 应用程序/仪表板/loading.tsx 导出默认函数 Loading() { 返回

正在加载...

} ### 错误边界优雅地处理错误： // 应用程序/仪表板/error.tsx “使用客户端” 导出默认函数Error({ 错误，重置， }：{ 错误：错误重置：() => 无效 }) { 返回（

出了点问题！

） } ## 路线组在不影响 URL 结构的情况下组织路由：应用程序/ ├──（营销）/ │ ├──layout.tsx # 营销布局 │ ├── about/page.tsx # /about │ └── contact/page.tsx # /contact └──（店）/ ├──layout.tsx # 店铺布局 └── 产品/page.tsx # /产品 ## 元数据 ### 静态元数据 // 应用程序/about/page.tsx 从“下一个”导入{元数据} 导出常量元数据：元数据 = { 标题：“关于我们”，描述：“了解更多关于我们公司的信息”， } ### 动态元数据 // 应用程序/博客/[slug]/page.tsx 导出异步函数generateMetadata({ params }: PageProps): Promise { const { slug } = 等待参数 const post = 等待 getPost(slug) 返回 { 标题：post.title } } ## 关键模式 1. **并置**：将组件、测试和样式放在路由附近 2. **私有文件夹** ：对非路由文件使用 `_folder` 3. **路由组** ：使用 `(folder)` 进行组织，不受 URL 影响 4. **并行路线** ：使用`@slot`进行复杂布局 5. **拦截路由** ：对模态框使用 `(.)` 模式 ## 资源详细模式请参见： * `references/routing-conventions.md` \- 完整的文件约定 * `references/layouts-templates.md` \- 布局组合模式 * `references/loading-error-states.md` \- 悬念和错误处理 * `examples/dynamic-routes.md` \- 动态路由示例 * `examples/parallel-routes.md` \- 并行和拦截路由

应用路由器

包含技能