外观
路由基础知识
基础路由概念
每个应用程序的骨架就是路由。 本页将为您介绍Web路由的基本概念以及如何在Next.js中处理路由。
术语
首先，您将在整个文档中看到这些术语的使用。 这里是一个快速参考:
- 树：一种可视化分层结构的约定。 例如，具有父节点和子节点组件的组件树，文件夹结构等。
- 子树：树的一部分，从一个新的根开始(第一个)并以叶子节点(最后一个)结束。
- 根：树或子树中的第一个节点，例如根布局。
- 叶子：子树中没有子节点的节点，例如URL路径中的最后一个段。
- URL段：由斜杠分隔的URL路径的一部分。
- URL路径：域名之后的URL的一部分(由段组成)。
app路由器
在版本13中，Next.js引入了一个新的App路由器，它建立在React服务器组件之上，支持共享布局、嵌套路由、加载状态、错误处理等。
App路由器在名为app的新目录中工作。 app目录与pages目录一起工作，以允许逐步采用。 这使您可以将应用程序的某些路由选择加入新行为，同时将其他路由保留在pages目录中以获得以前的行为。 如果您的应用程序使用pages目录，请也参阅Pages Router文档。
注意
App路由器优先于Pages路由器。 跨目录的路由不应解析到相同的URL路径，并将导致构建时错误以防止冲突。
默认情况下，app内的组件都是React服务器组件。 这是一种性能优化，可让您轻松地采用它们，您也可以使用客户端组件。
提示
如果您对服务器组件不太熟悉，请查看服务器页面。
文件夹和文件的作用
Next.js使用基于文件系统的路由器，其中:
路由段
路由中的每个文件夹都表示一个路由段。 每个路由段都映射到相应的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 |
提示
可以使用.js、.jsx或.tsx文件扩展名进行特殊文件。
组件层次结构
路由段的特殊文件中定义的React组件以特定的层次结构呈现:
layout.jstemplate.jserror.js(React错误边界)loading.js(React悬念边界)not-found.js(React错误边界)page.js或嵌套的layout.js
在嵌套路由中，段的组件将嵌套在其父段的组件内部。
协同定位
除了特殊文件，您还可以选择在app目录中的文件夹内放置自己的文件(如组件、样式、测试等)。
这是因为尽管文件夹定义路由，但只有page.js或route.js返回的内容才是公开可访问的。
了解有关项目组织和协同定位的更多信息。
高级路由模式
App路由器还提供了一组约定来帮助您实现更高级的路由模式。 这些包括:
- 并行路由:允许您同时在同一视图中显示两个或更多页面，这些页面可以独立导航。 您可以将它们用于具有自己的子导航的分割视图。 例如仪表板。
- 拦截路由:允许您拦截一条路由并在另一条路由的上下文中显示它。 当保持当前页面的上下文很重要时，您可以使用这些。 例如，在编辑一个任务的同时查看所有任务或在feed中展开照片。
这些模式允许您构建更丰富和更复杂的UI，使小团队和个人开发人员也能轻松实现这些历史上复杂的功能。
后续步骤
现在您已经了解了Next.js中路由的基础知识，请按照下面的链接创建您的第一个路由。