Next 系列之 Routing - Defining Routes(三)

Defining Routes 定义路由

The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.

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

1.Terminology 术语

2.The app Router app 路由器

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.

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

The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior. If your application uses the pages directory, please also see the Pages Router documentation.

App 路由器在名为 app 的新目录中工作。 app 目录与 pages 目录协同工作，以允许增量采用。这允许您将应用程序的某些路由选择为新行为，同时将其他路由保留在 pages 目录中以获得以前的行为。如果您的应用程序使用 pages 目录，请参阅 Pages 路由器文档。

Good to know: The App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.

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

By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components.

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

ps: 这也就是什么有的时候需要手动添加 'use client' 的原因之一。

3.Roles of Folders and Files 文件夹和文件的作用

Next.js uses a file-system based router where:

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

-Folders

-Files

4.Route Segments 路线段

Each folder in a route represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.

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

5.Nested Routes 嵌套路由

To create a nested route, you can nest folders inside each other. For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.

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

6.File Conventions 文件约定

Next.js provides a set of special files to create UI with specific behavior in nested routes:

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

7.Component Hierarchy 组件层次结构

The React components defined in special files of a route segment are rendered in a specific hierarchy:

路由段的特殊文件中定义的 React 组件以特定层次结构呈现：

• layout.js

• template.js

• error.js (React error boundary)
  error.js （React 错误边界）

• loading.js (React suspense boundary)
  loading.js （React 悬念边界）

• not-found.js (React error boundary)
  not-found.js （React 错误边界）

• page.js or nested layout.js
page.js 或嵌套 layout.js

In a nested route, the components of a segment will be nested inside the components of its parent segment.

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

8.Colocation 拼置

In addition to special files, you have the option to colocate your own files (e.g. components, styles, tests, etc) inside folders in the app directory.

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

This is because while folders define routes, only the contents returned by page.js or route.js are publicly addressable.

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

9.Advanced Routing Patterns 高级路由模式

The App Router also provides a set of conventions to help you implement more advanced routing patterns. These include:

-Parallel Routes : Allow you to simultaneously show two or more pages in the same view that can be navigated independently. You can use them for split views that have their own sub-navigation. E.g. Dashboards.

并行路由：允许您在同一个视图中同时显示两个或多个页面，这些页面可以独立导航。您可以将它们用于具有自己子导航的拆分视图。例如，仪表板。

-Intercepting Routes: Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.

拦截路由：允许您拦截路由并在另一个路由的上下文中显示它。当保持当前页面的上下文很重要时，您可以使用这些路由。例如，在编辑一个任务时查看所有任务或在提要中展开一张照片。