Route Groups(路由分组)
app 文件夹中的嵌套结构会直接映射到 URL 的 path 中,但是通过路由分组则可以打破这个规则。
使用路由分组可以允许你在分组中自己组织路由 segment 和项目文件,不必担心影响到 URL path。
路由分组可以用于:
- 在不影响 URL 结构的情况下组织路由。
- 在同一路由段级别上支持嵌套布局
- 在同一 segment 中创建多个嵌套布局,包括多个根布局。
- 将布局添加到共同 segment 中的一部分路由中。
约定
路由分组可以使用(folderName)这样的方式做到。
例子
如何组织路由而不影响到 URL path
为了组织路由而不影响到 URL,需要创建一个分组并将相关的路由组织到一起。
在括号中的文件夹将被 URL 所忽略。比如下面的 marketing 或者 shop。

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

指定特定的路由 segment 用 layout
创建一个新的路由分组,并且将共享同一 layout 的路由放到改组中。在分组之外的路由将无法获取到共享的 layout。
以下图为例,新的分组为(shop),account和cart共享一个 layout ,但是 checkout 就无法共享到 layout。

创建多个 root layout
删除顶级 layout 文件,然后在每一个路由分组中使用 layout.js。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。
每个 layout 中记得加入<html>和<body>标签。

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