路由组 (Route Groups)

app 目录中,嵌套文件夹通常映射到 URL 路径。但您可以将文件夹标记为路由组 (Route Group),从而避免该文件夹出现在路由的 URL 路径中。

这使您能够将路由片段和项目文件按逻辑分组,同时不影响 URL 路径结构。

路由组适用于以下场景:

约定

通过在文件夹名称外加括号即可创建路由组:(文件夹名)

示例

组织路由而不影响 URL 路径

为了在不改变 URL 的前提下组织路由,可通过创建分组来关联相关路由。括号内的文件夹名不会出现在 URL 中(例如 (marketing)(shop))。

使用路由组组织路由

虽然 (marketing)(shop) 内的路由共享相同的 URL 层级,但您可以通过在各自文件夹中添加 layout.js 文件为每个组创建不同的布局。

具有多布局的路由组

为特定路由启用布局

要为特定路由启用布局,可新建路由组(如 (shop)),并将需要共享布局的路由移入组内(如 accountcart)。组外的路由(如 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 会触发整页加载。此规则适用于多根布局场景

On this page