路由基础

路由段

路由中的每个文件夹都表示一个**路由段**。每个路由段都映射到**URL 路径**中相应的**段**。

嵌套路由

要创建嵌套路由，您可以将文件夹彼此嵌套。例如，您可以通过在app目录中嵌套两个新文件夹来添加一个新的/dashboard/settings路由。

/dashboard/settings路由由三个段组成

• /（根段）
• dashboard（段）
• settings（叶段）

文件约定

Next.js 提供了一组特殊文件，用于在嵌套路由中创建具有特定行为的 UI。

注意：特殊文件可以使用 .js、.jsx 或 .tsx 文件扩展名。

组件层次结构

在路由段的特殊文件中定义的 React 组件按照特定的层次结构呈现。

• layout.js
• template.js
• error.js（React 错误边界）
• loading.js（React 悬念边界）
• not-found.js（React 错误边界）
• page.js 或嵌套的 layout.js

在嵌套路由中，某个路由段的组件将嵌套在其父路由段的组件内部。

同处位置

除了特殊文件之外，您还可以选择将自己的文件（例如组件、样式、测试等）同处放置在 app 目录中的文件夹中。

这是因为，虽然文件夹定义了路由，但只有 page.js 或 route.js 返回的内容才是可公开访问的。

详细了解项目组织和同处位置。

高级路由模式

App Router 还提供了一组约定，以帮助您实现更高级的路由模式。这些包括

• 并行路由：允许您在同一视图中同时显示两个或多个页面，并且可以独立导航。您可以将它们用于具有自己子导航的拆分视图。例如：仪表盘。
• 拦截路由：允许您拦截路由并在另一个路由的上下文中显示它。当保持当前页面的上下文很重要时，您可以使用这些路由。例如：在编辑一个任务时查看所有任务，或在提要中展开照片。

这些模式允许您构建更丰富、更复杂的 UI，使小型团队和独立开发人员能够轻松实现以往复杂的功能。

后续步骤

现在您已经了解了 Next.js 中路由的基础知识，请按照以下链接创建您的第一个路由。