路由基础

路由是每个应用程序的骨架。本页将向你介绍 Web 路由的基本概念，以及如何在 Next.js 中处理路由。

术语

首先，你会在整个文档中看到这些术语被使用。以下是一个快速参考：

• 树： 用于可视化层级结构的约定。例如，具有父组件和子组件的组件树、文件夹结构等。
• 子树： 树的一部分，从新的根 (第一个) 开始，到叶子 (最后) 结束。
• 根： 树或子树中的第一个节点，例如根布局。
• 叶子： 子树中没有子节点的节点，例如 URL 路径中的最后一个段。

• URL 段： URL 路径中由斜杠分隔的部分。
• URL 路径： URL 中域名之后的部分 (由段组成)。

app 路由器

在第 13 版中，Next.js 引入了一个基于 React 服务器组件 构建的新的 App Router，它支持共享布局、嵌套路由、加载状态、错误处理等。

App Router 在一个名为 app 的新目录中工作。app 目录与 pages 目录一起工作，允许逐步采用。这使你可以将应用程序的某些路由选择使用新行为，同时保持其他路由在 pages 目录中使用以前的行为。如果你的应用程序使用 pages 目录，请同时参阅 Pages Router 文档。

提示： App Router 优先于 Pages Router。跨目录的路由不应解析为相同的 URL 路径，否则会导致构建时错误，以防止冲突。

默认情况下，app 内的组件是 React 服务器组件。这是一种性能优化，可以让你轻松采用它们，你也可以使用 客户端组件。

建议： 如果你不熟悉服务器组件，请查看 服务器 页面。

文件夹和文件的作用

Next.js 使用基于文件系统的路由器，其中：

• 文件夹用于定义路由。路由是一个从根文件夹到包含 page.js 文件的最终叶子文件夹的嵌套文件夹的单一路径，遵循文件系统层次结构。参见 定义路由。
• 文件用于创建显示在路由段中的 UI。参见 特殊文件。

路由段

路由中的每个文件夹代表一个路由段。每个路由段都映射到 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 suspense 边界)
• not-found.js (React 错误边界)
• page.js 或嵌套的 layout.js

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

并置

除了特殊文件外，你还可以选择在 app 目录中的文件夹内并置自己的文件 (例如组件、样式、测试等)。

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

了解更多关于 项目组织和并置 的信息。

高级路由模式

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

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

这些模式允许你构建更丰富、更复杂的 UI，使小团队和个人开发者能够实现历史上复杂的功能。

下一步

现在你已经了解了 Next.js 中路由的基础知识，请点击下面的链接创建你的第一个路由：