路由组

¥Route Groups

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

¥In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.

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

¥This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.

路由组可用于：

¥Route groups are useful for:

• 按网站版块、意图或团队等分组组织路由。

  ¥Organizing routes into groups e.g. by site section, intent, or team.

• 在同一路由段级别中启用嵌套布局：

  ¥Enabling nested layouts in the same route segment level:

  • 在同一段中创建多个嵌套布局，包括多个根布局

    ¥Creating multiple nested layouts in the same segment, including multiple root layouts

  • 选择特定的部分到布局中

    ¥Opting specific segments into a layout

• 选择在特定路由上加载骨架

  ¥Opting for loading skeletons on a specific route

惯例

¥Convention

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

¥A route group can be created by wrapping a folder's name in parenthesis: (folderName)

需要了解：

¥Good to know:

• 路由组的命名除了用于组织之外没有特殊意义。它们不影响 URL 路径。

  ¥The naming of route groups has no special significance other than for organization. They do not affect the URL path.

• 包含路由组的路由不应解析为与其他路由相同的 URL 路径。例如，由于路由组不影响 URL 结构，因此 (marketing)/about/page.js 和 (shop)/about/page.js 都会解析为 /about 并导致错误。

  ¥Routes that include a route group should not resolve to the same URL path as other routes. For example, since route groups don't affect URL structure, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.

• 如果你使用多个根布局而没有顶层 layout.js 文件，则你的主 page.js 文件应在其中一个路由组中定义，例如：app/(marketing)/page.js。

  ¥If you use multiple root layouts without a top-level layout.js file, your home page.js file should be defined in one of the route groups, For example: app/(marketing)/page.js.

• 跨多个根布局导航将导致完整页面加载（与客户端导航相反）。例如，从使用 app/(shop)/layout.js 的 /cart 导航到使用 app/(marketing)/layout.js 的 /blog 将导致整页加载。这仅适用于多个根布局。

  ¥Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.