Skip to main content

路由组

在app文件夹中, URL 路径通常由嵌套文件夹映射。但是,您可以通过将文件夹标记为路由组来防止将文件夹包含在路由在 URL 路径中。

这让您在不影响 URL 路径结构的情况下来将路由段和项目文件组织到逻辑组中。

路由组适用于:

公约​

可以通过将文件名外包裹圆括号来创建路由组。(folderName)

例子​

在不影响 URL 路径的情况下组织路由​

想在不影响 URL 的情况下组织路由，请创建一个组来将相关的路由保存在一起。URL 会忽略圆括号中的文件夹。（如：(marketing)或`(shop)）

Organizing Routes with Route Groups

即使(marketing) 和 (shop)中的路由共享相同的 URL 层次结构，您能够通过在各自文件夹中添加 layout.js`文件来为每个组创建不同的布局。

Route Groups with Multiple Layouts

在布局中选择具体的段​

为了在布局中选择具体的路由，请创建一个路由组（如：(shop)）并将共享同一个布局的路由移动到这个组中（如：account 和 cart）。组外的路由不会分享此布局（如：checkout）。

Route Groups with Opt-in Layouts

创建多个根布局​

为了创建多个根布局, 请移除顶级的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会导致整个页面加载。这仅适用于多个根布局。