路由组(route groups)

在 app 目录中，嵌套文件夹通常会映射到 URL 路径。但是，你可以将一个文件夹标记为路由组，以防止该文件夹包含在路由的 URL 路径中。

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

路由组对以下情况很有用:

将路由组织成组，例如按网站部分、意图或团队。
在同一路由段级别启用嵌套布局:
- 在同一段中创建多个嵌套布局，包括多个根布局
- 为公共段中的一部分路由添加布局

约定

可以通过将文件夹名称用括号括起来来创建路由组: (folderName)

示例

组织路由而不影响 URL 路径

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

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

将特定段加入布局

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

创建多个根布局

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

在上面的示例中，(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 将导致完整页面加载。这仅适用于多个根布局。