next.js 中文文档

主题

路由分组 ​

在app目录中，嵌套文件夹通常映射到URL路径。然而，您可以将一个文件夹标记为路由分组，以防止文件夹被包含在路由的URL路径中。

这允许您将路由段和项目文件组织成逻辑组，而不影响URL路径结构。

路由分组适用于：

约定 ​

可以通过将文件夹名称括在括号中来创建路由分组：(folderName)

Examples ​

组织路由而不改变URL路径 ​

要在不影响URL的情况下组织路由，请创建一个组来保持相关路由在一起。括号中的文件夹将从URL中省略（例如(marketing)或(shop)）。

Organizing Routes with Route Groups

尽管(marketing)和(shop)内的路由共享相同的URL层次结构，但您可以通过在它们的文件夹中添加一个layout.js文件来为每个组创建不同的布局。

Route Groups with Multiple Layouts

将特定段选择到布局中 ​

要将特定路由选择到布局中，请创建一个新的路由组（例如(shop)），并将共享相同布局的路由移动到该组中（例如account和cart）。组外的路由将不共享布局（例如checkout）。

Route Groups with Opt-in Layouts

创建多个根布局 ​

要创建多个root layouts，请删除顶层layout.js文件，并在每个路由组内添加一个layout.js文件。这对于将应用程序划分为具有完全不同的UI或体验的部分非常有用。需要在每个根布局中添加<html>和<body>标签。

Route Groups with Multiple Root Layouts

在上面的示例中，(marketing)和(shop)都有自己的根布局。

须知：

  • 路由组的命名除了用于组织外，没有特殊意义。它们不影响URL路径。
  • 包含路由组的路由不应该解析为与其他路由相同的URL路径。例如，由于路由组不影响URL结构，(marketing)/about/page.js和(shop)/about/page.js都将解析为/about并导致错误。
  • 如果您在没有顶层layout.js文件的情况下使用多个根布局，您的主页page.js文件应该定义在一个路由组中，例如：app/(marketing)/page.js。
  • 跨多个根布局导航将导致完整页面加载（与客户端导航相对）。例如，从使用app/(shop)/layout.js的/cart导航到使用app/(marketing)/layout.js的/blog将导致完整页面加载。这只适用于多个根布局。