Skip to main content

路由组

app 目录中, 嵌套文件夹通常被映射为 URL 路径. 不过, 你可以通过将文件夹标记为 Route Group (路由组), 来防止文件夹被包含在 URL 路径中.

这样就可以在不影响 URL 路径结构的情况下, 将路由段和项目文件放进一个逻辑上的分组.

Route groups(路由组)对以下情况会有帮助:


Convention (文件名协定)

用括号括起文件夹名称, 即可创建路由组, 如: (folderName)


Examples (示例)

Organize routes without affecting the URL path (在不影响 URL 路径的情况下进行分组路由)

要在不影响 URL 的情况下进行路由分组, 可创建一个组, 将相关路由集中在一起. 括号中的文件夹将在 URL 中被忽略(比如 (marketing)(shop) ).

example_1_1

即使 (marketing)(shop) 中的路由共享了同一个 URL 层级, 你也可以在它们各自的文件夹中添加 layout.js 来为它们创建不同的布局.

example_1_2

Opting specific segments into a layout (部分路由使用一个 layout)

要对部分路由指定一个布局, 你可以创建一个新的路由组(如 shop ), 并将使用该布局的路由移入该组中( 如 accountcart ). 在组外的路由将不会使用它们的布局(如 checkout ).

example_2_1

Creating multiple root layouts (创建多个根布局)

要创建多个 root layouts(根布局), 可移除顶层的 layout.js 文件, 并在每个路由组内添加一个 layout.js 文件. 这对于将应用程序划分为具有完全不同的用户界面或体验非常有用. 每个根布局都需要添加 <html><body> 标记。

example_3_1

在上面的例子中, (marketing)(shop) 都有他们各自的根布局


请注意:

  • 路由组的命名除了用于组织管理外没有其他特殊意义. 它们不会影响 URL 路径.
  • 路由组内路由生成的 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 将导致全页面加载. 这仅适用于多个根布局的情况.