跳到内容

路由组

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

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

路由组对于以下情况非常有用:

约定

可以通过将文件夹名称括在括号中来创建路由组:(文件夹名称)

示例

组织路由而不影响 URL 路径

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

Organizing Routes with Route Groups

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

Route Groups with Multiple Layouts

为特定段选择布局

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

Route Groups with Opt-in Layouts

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

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

Folder structure showing a loading.tsx and a page.tsx inside the route group

现在,loading.tsx 文件将仅应用于你的仪表盘 → 概览页面,而不是所有仪表盘页面,而不会影响 URL 路径结构。

创建多个根布局

要创建多个根布局,请删除顶层 layout.js 文件,并在每个路由组内添加 layout.js 文件。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。<html><body> 标签需要添加到每个根布局中。

Route Groups with Multiple Root Layouts

在上面的示例中,(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 将导致完整的页面加载。这适用于多个根布局。