跳到主要内容
目录

路由分组

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

这使您能够在不影响 URL 路径结构的情况下，将路由段和项目文件组织成逻辑组。

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

约定​

可以通过在文件夹名称周围加上括号来创建路由组：(folderName)

示例​

在不影响 URL 路径的情况下组织路由​

要组织路由而不影响 URL，请创建一个组以将相关路由放在一起。 括号中的文件夹将从 URL 中省略（例如 (marketing) 或 (shop)）。 route group organisation

即使 (marketing) 和 (shop) 中的路由共享相同的 URL 层次结构， 您仍可以通过在其文件夹中添加 layout.js 文件为每个组创建不同的布局。 route group multiple layouts

将特定段投入布局​

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

创建多个根布局​

要创建多个根布局，请删除顶层 layout.js 文件，并在每个路由组中添加 layout.js 文件。 这对于将应用程序分区为具有完全不同 UI 或体验的部分非常有用。 需要在每个根布局中添加 <html> 和 <body> 标签。 route group 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 将导致完整页面加载。这仅适用于多个根布局。