Next.js 中文网

主题

路由组 ​

¥Route Groups

路由组是一种文件夹约定，可让你按类别或团队组织路由。

¥Route Groups are a folder convention that let you organize routes by category or team.

惯例 ​

¥Convention

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

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

此约定表示文件夹用于组织目的，不应包含在路由的 URL 路径中。

¥This convention indicates the folder is for organizational purposes and should not be included in the route's URL path.

用例 ​

¥Use cases

  • 按团队、关注点或功能组织路由。

    ¥Organizing routes by team, concern, or feature.

  • 定义多个 根布局。

    ¥Defining multiple root layouts.

  • 选择特定路由段共享布局，同时阻止其他路由段共享。

    ¥Opting specific route segments into sharing a layout, while keeping others out.

注意事项 ​

¥Caveats

  • 完整页面加载：如果你在使用不同根布局的路由之间导航，则会触发整个页面重新加载。例如，从使用 app/(shop)/layout.js 的 /cart 导航到使用 app/(marketing)/layout.js 的 /blog。这仅适用于多个根布局。

    ¥Full page load: If you navigate between routes that use different root layouts, it'll trigger a full page reload. For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js. This only applies to multiple root layouts.

  • 冲突路径：不同组中的路由不应解析为相同的 URL 路径。例如，(marketing)/about/page.js 和 (shop)/about/page.js 都解析为 /about 并导致错误。

    ¥Conflicting paths: Routes in different groups should not resolve to the same URL path. For example, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.

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

    ¥Top-level root layout: If you use multiple root layouts without a top-level layout.js file, make sure your home route (/) is defined within one of the route groups, e.g. app/(marketing)/page.js.