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