路由组 (Route Groups)
在 app 目录中,嵌套文件夹通常映射到 URL 路径。但您可以将文件夹标记为路由组 (Route Group),从而避免该文件夹出现在路由的 URL 路径中。
这使您能够将路由片段和项目文件按逻辑分组,同时不影响 URL 路径结构。
路由组适用于以下场景:
约定
通过在文件夹名称外加括号即可创建路由组:(文件夹名)
示例
组织路由而不影响 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会触发整页加载。此规则仅适用于多根布局场景



