构建你的应用：路由

构建你的应用程序：路由

路由基础

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

术语

首先，你会在文档中看到这些术语的使用。这里是一个快速参考：
img.png

  • Tree（树）：用于可视化层次结构的约定，例如组件树、父组件和子组件、文件夹结构等。

  • Subtree（子树）：树的一部分，从新的根节点开始（第一）到叶子节点结束（最后）。

  • Root（根）：树或子树的第一个节点，例如根布局。

  • Leaf（叶）：子树中没有子节点的节点，例如URL路径中的最后一个段。

  • URL Segment（URL段）：由斜杠分隔的URL路径的一部分。

  • URL Path（URL路径）：URL中域名之后的部分（由多个段组成）。

app路由

在版本13中，Next.js引入了新的App Router，它建立在React Server Components之上，支持共享布局、嵌套路由、加载状态、错误处理等。

App Router在名为app的新目录中工作。app目录与pages目录一起工作，允许逐步采用。这允许你选择应用程序中的一些路由采用新的行为，同时保持其他路由在pages目录中的旧行为。如果你的应用程序使用pages目录，请也查看页面路由文档。

背景知识：App Router优先于页面路由。跨目录的路由不应解析到相同的URL路径，这将导致构建时错误以防止冲突。

默认情况下，app内部的组件是React Server Components。这是一种性能优化，并允许你轻松采用它们，你也可以使用客户端组件。

建议：如果你是Server Components的新手，请查看服务器页面。

文件夹和文件的角色

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

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

路由段

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

嵌套路由

要创建嵌套路由，你可以在彼此内部嵌套文件夹。例如，你可以通过在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

image

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

image

同处

除了特殊文件外，你还可以将自定义文件（例如组件、样式、测试等）与app目录中的文件夹一起同处。

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

了解更多关于项目组织和同处的信息。

高级路由模式

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

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

这些模式允许你构建更丰富和更复杂的UI，使历史上对小团队和个人开发者来说复杂的功能民主化。

路由功能演示

演示网站

image