路由组 (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
会触发整页加载。此规则仅适用于多根布局场景