React带()的路径用法

比如，在 app/(commonLayout)/apps/Apps.tsx 这个路径中，(commonLayout) 可能是 Next.js 13+ 的 App Router (基于 app 目录) 的路由分组（Route Group），用于组织文件结构，同时共享布局（layout）。

---

1. (commonLayout) 是什么？

在 Next.js 13+ 的 app 目录中，括号包裹的文件夹 是路由分组（Route Group），它不会影响 URL 结构，但可以用来组织代码。例如：

app/
├── (commonLayout)/
│   ├── layout.tsx   # 共享布局
│   ├── apps/
│   │   ├── Apps.tsx
│   │   ├── page.tsx  # 访问 /apps
│   ├── dashboard/
│   │   ├── page.tsx  # 访问 /dashboard
├── page.tsx  # 访问 /

在这个例子中：

• (commonLayout) 只是一个分组目录，不影响路由路径。
• Apps.tsx 位于 apps/ 目录下，最终的路由仍然是 /apps。

---

2. 场景

这是 Next.js 官方推荐 的组织代码方式，特别适用于：

1. 共享 Layout（布局）：
   • app/(commonLayout)/layout.tsx 可以为 apps/ 和 dashboard/ 提供公共布局，而不会影响路由路径。
2. 分类管理代码：
   • 避免 app/ 目录下变得杂乱，提升可读性。
3. 避免路由污染：
   • 例如：

     app/
     ├── (auth)/
     │   ├── login/
     │   ├── register/
     ├── (dashboard)/
     │   ├── analytics/
     │   ├── reports/
     

     • (auth) 组内的文件不会影响 (dashboard) 组。
     • login 仍然是 /login，不会变成 /auth/login。

---

3. (commonLayout) 的实际用途

你可以在 layout.tsx 里定义公共组件，例如：

app/(commonLayout)/layout.tsx

export default function CommonLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="common-layout">
      <header>我是公共头部</header>
      <main>{children}</main>
      <footer>我是公共底部</footer>
    </div>
  );
}

app/(commonLayout)/apps/page.tsx

export default function AppsPage() {
  return <h1>Apps 页面</h1>;
}

访问 /apps 时，它会自动套用 CommonLayout。

---

结论

• (commonLayout) 是 Next.js App Router 的路由分组（Route Group）。
• 不会影响 URL 路径，只是用来组织代码 & 共享布局。
• 适合在项目中清晰地分组页面，同时共享 layout.tsx。