Skip to main content

路由分组

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

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

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

约定

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

示例

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

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

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

将特定段投入布局

要将特定路由投入布局,请创建一个新的路由组(例如 (shop))并将共享相同布局的路由移到该组中(例如 accountcart)。 组外的路由将不共享布局(例如 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 将导致完整页面加载。这仅适用于多个根布局。