路由组

2026年9月6日

路由组是带括号的文件夹：(marketing)、(shop)。它只影响仓库怎么摆，不会变成 URL 的一段。

app/
├── (marketing)/
│   ├── page.tsx          → /
│   └── about/page.tsx    → /about
└── (shop)/
    └── cart/page.tsx     → /cart
text

没有括号时，marketing/about 会变成 /marketing/about。加上 (marketing) 之后，外面看不到这个名字。

用来干什么

  • 按业务拆：前台、后台、文档各一组
  • 给一组页面单独 layout.tsx（导航不同），又不想 URL 多一截
  • 大仓库按团队分目录，避免 app 根下平铺几十个文件夹

组里的 layout.tsx 只包这一组。根上的 app/layout.tsx 仍然包全站。

多个根布局

前台站和后台站要完全不同的 <html> / <body>（字体、主题、脚本都不一样）时，可以拆多个根布局：

  1. 删掉 app/layout.tsx
  2. 在每个组里各自放带 <html>、<body> 的 layout.tsx
app/
├── (site)/
│   ├── layout.tsx     ← 有 html/body
│   └── page.tsx
└── (admin)/
    ├── layout.tsx     ← 另一套 html/body
    └── dashboard/page.tsx
text

注意：

  • 任意时刻只能命中其中一个根布局
  • 两组不能抢同一条 URL，例如两边都写 page.tsx 映射 / 会冲突
  • 共享组件放到 app 外的 src/components，不要指望「没有根 layout」时还有统一外壳

小项目一个根布局就够。只有「两套站点塞进一个仓库」才值得拆。

和平行路由、动态段的差别

约定URL作用
(name)不影响组织目录 / 分组布局
@name不影响同一 layout 的额外槽
[name]成为一段动态参数

下一篇写 route.ts：在 App Router 里开 HTTP 接口。

参考文档