Menu

路由组(Route Groups)

app 目录中,嵌套文件夹通常会映射到 URL 路径。但是,你可以将文件夹标记为路由组,以防止该文件夹被包含在路由的 URL 路径中。

这允许你将路由段和项目文件组织成逻辑组,而不会影响 URL 路径结构。

路由组的用途:

约定

可以通过将文件夹名称用圆括号括起来来创建路由组:(folderName)

示例

组织路由而不影响 URL 路径

要在不影响 URL 的情况下组织路由,可以创建一个组来将相关路由放在一起。括号中的文件夹将从 URL 中省略(例如 (marketing)(shop))。

使用路由组组织路由

尽管 (marketing)(shop) 内的路由共享相同的 URL 层次结构,但你可以通过在它们的文件夹中添加 layout.js 文件来为每个组创建不同的布局。

具有多个布局的路由组

将特定段纳入布局

要将特定路由纳入布局中,创建一个新的路由组(例如 (shop)),并将共享相同布局的路由移入该组(例如 accountcart)。组外的路由将不会共享该布局(例如 checkout)。

具有选择性布局的路由组

为特定路由选择加载骨架屏

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

文件夹结构显示路由组内的 loading.tsx 和 page.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 将导致完整页面加载。这适用于多个根布局。