路由组
在 app
目录中,嵌套文件夹通常映射到 URL 路径。但是,你可以将文件夹标记为路由组,以防止该文件夹包含在路由的 URL 路径中。
这允许你将路由段和项目文件组织成逻辑组,而不会影响 URL 路径结构。
路由组对于以下情况非常有用:
- 将路由组织成组,例如按站点部分、意图或团队。
- 在同一路由段级别启用嵌套布局
- 向公共段中的特定路由添加加载骨架屏
约定
可以通过将文件夹名称括在括号中来创建路由组:(文件夹名称)
示例
组织路由而不影响 URL 路径
要组织路由而不影响 URL,请创建一个组以将相关路由放在一起。括号中的文件夹将从 URL 中省略(例如 (marketing)
或 (shop)
)。


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


为特定段选择布局
要为特定路由选择布局,请创建一个新的路由组(例如 (shop)
),并将共享同一布局的路由移动到该组中(例如 account
和 cart
)。组外的路由将不共享该布局(例如 checkout
)。


为特定路由选择加载骨架屏
要通过 loading.js
文件将加载骨架屏应用于特定路由,请创建一个新的路由组(例如,/(overview)
),然后将你的 loading.tsx
移动到该路由组中。


现在,loading.tsx
文件将仅应用于你的仪表盘 → 概览页面,而不是所有仪表盘页面,而不会影响 URL 路径结构。
创建多个根布局
要创建多个根布局,请删除顶层 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
将导致完整的页面加载。这仅适用于多个根布局。
这是否有帮助?