路由基础概念

每个应用程序的框架都是路由。本页面将向您介绍 Web 路由的基本概念及如何操作 Next.js 中的路由。

术语

首先，您会看到在整个文档中都使用了这些术语。下面是快速参考：

• Tree: 用于可视化层级结构的约定。例如，包含父子组件的组件树，一个文件夹结构等。
• Subtree: 树的一部分，以新的根节点（第一个）开始并以叶子节点（最后一个）结束。
• Root: 树或子树的第一个节点，如根布局。
• Leaf: 子树中没有子项的节点，如：URL 路径中的最后部分。

• URL segment: URL 路径中用斜杠分隔的部分。
• URL Path: 域名后的 URL 部分 (由 segments 组成).

app 路由器

在 Next.js13 中, Next.js 引入了构建在React 服务器组件上的新的App Router, 它支持共享布局、嵌套路由、加载状态和错误处理等。

APP Router 在新目录'app'中起作用。'app'目录和'pages'目录一起工作让您逐渐适应。这让您可以选择在您的应用中使用新的'app'路由，同时保留'pages'目录中的其它路由。如果您的应用程序中使用'pages'目录，请同时查看Pages Router 文档。

您需要知道: App Router 优先于 Pages Router。 跨目录的路由不应该解析为相同的 URL 路径，它会导致构件时发生错误以防止冲突。

默认情况下，app目录下的组件是React 服务器组件。这是一种性能优化并让您容易使用的组件，同时您也可以使用客户端组件

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

文件夹和文件的作用

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

• 文件夹 用于定义路由. 路由是嵌套文件夹的唯一路径，遵循从根目录到最终包含一个page.js文件的子目录的文件系统层次结构。 参阅 自定义路由.
• 文件 用于创建为路由段展示的 UI. See 特殊文件.

路由段

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

嵌套路由

要生成嵌套路由,您可以将文件夹嵌套在其他文件夹中。例如, 您能够通过在app目录下嵌套两个新文件夹来添加/dashboard/settings路由。

/dashboard/settings 路由由三部分组成：

• / (根段)
• dashboard (段)
• settings (子段)

文件约定

Next.js 提供一套特殊的文件来创建在嵌套路由中拥有特殊行为的 UI。

layout	段和子项的共享 UI
page	路由的唯一 UI，使路由可公开访问
loading	段和其子项的加载 UI
not-found	未发现段和子项的 UI
error	段和子段发生错误时的 UI
global-error	全局错误 UI
route	服务器端 API 端点
template	专门的重新渲染的布局 UI
default	[平行路由]的回退 UI(/docs/content/app/building-your-application/routing/parallel-routes)

您需要知道: 特殊文件可以使用.js, .jsx, 或 .tsx 文件扩展名。

组件层次结构

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

• layout.js
• template.js
• error.js (React error boundary)
• loading.js (React suspense boundary)
• not-found.js (React error boundary)
• page.js 或 嵌套 layout.js

在嵌套路由中, 段组件会被嵌套在其父段组件内。

托管

除了特殊文件，您可以选择在app目录的文件夹中托管您自己的文件(例如：组件, 样式, 测试等)。

这是因为虽然文件夹是路由地址，但只有page.js或route.js文件的内容是可以公开访问的。

了解更多关于 项目组织和托管.

高级路由模式

App Router 也提供了一套帮助您实现高级路由模式的约定。:

• 平行路由: 让您能够同时在同一个视图中显示两个或多个页面，这些页面能够独立导航。您可以将它们用于具有其子导航的拆分视图。如仪表盘。
• 拦截路由: 允许您拦截路由并将其显示在另一个路由的上下文中。当保留的当前页面上下文很重要时，您可以使用拦截路由。

您可以通过这些模式构建更加丰富和复杂的 UI，实现以前对于小型团队和个人开发者来说复杂的功能。