Route Groups(路由分组)

app 文件夹中的嵌套结构会直接映射到 URL 的 path 中,但是通过路由分组则可以打破这个规则。

使用路由分组可以允许你在分组中自己组织路由 segment 和项目文件,不必担心影响到 URL path。

路由分组可以用于:

  1. 在不影响 URL 结构的情况下组织路由。
  2. 在同一路由段级别上支持嵌套布局
  3. 在同一 segment 中创建多个嵌套布局,包括多个根布局。
  4. 将布局添加到共同 segment 中的一部分路由中。

约定

路由分组可以使用(folderName)这样的方式做到。

例子

如何组织路由而不影响到 URL path

为了组织路由而不影响到 URL,需要创建一个分组并将相关的路由组织到一起。

在括号中的文件夹将被 URL 所忽略。比如下面的 marketing 或者 shop。

Organizing Routes with Route Groups

即使(marketing)和(shop)路由的 URL 级别是相同的,您也可以通过在每个组的文件夹中添加 layout.js 文件来为它们创建不同的布局。

Route Groups with Multiple Layouts

指定特定的路由 segment 用 layout

创建一个新的路由分组,并且将共享同一 layout 的路由放到改组中。在分组之外的路由将无法获取到共享的 layout。

以下图为例,新的分组为(shop),account和cart共享一个 layout ,但是 checkout 就无法共享到 layout。

Route Groups with Opt-in Layouts

创建多个 root layout

删除顶级 layout 文件,然后在每一个路由分组中使用 layout.js。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。

每个 layout 中记得加入<html>和<body>标签。

Route Groups with Multiple Root Layouts

在上面的例子中,marketing 和 shop 都拥有各自的 root layout。

其他

  1. 路由分组除了用于组织之外没有什么意义,它们不会影响 URL path
  2. 在路由分组中,不应该用相同的路径名。(marketing)/about/page.js和(shop)/about/page.js都会解析成/about所以会报错。
  3. 如果您在没有顶级layout.js文件的情况下使用多个root layout布局,您的 home 页对应的page.js 应该定义在其中一个路由组中,例如:app/(marketing)/page.js。
  4. 在多个根布局之间导航将导致整个页面重新加载。比如,用app/(shop)/layout.js从/cart导航到使用app/(marketing)/layout.js的/blog,会让整个页面重新加载。这仅适用于多个root layout 的情况。