Next.js 14中如何在动态路由/management/[id]下添加子路由？

1. 正确的路由文件夹结构（Next.js App Router） #

你需要按如下方式组织app目录，即可实现/management/[id]/issues、/management/[id]/features等目标路由，且完全符合框架规则：

app/
└── management/
    ├── [id]/
    │   ├── page.tsx          # 项目仪表盘：/management/123
    │   ├── issues/
    │   │   ├── page.tsx      # 问题列表：/management/123/issues
    │   │   └── new/
    │   │       └── page.tsx  # 创建问题：/management/123/issues/new
    │   └── features/
    │       ├── page.tsx      # 功能列表：/management/123/features
    │       ├── [featureId]/
    │       │   └── page.tsx  # 功能详情：/management/123/features/456
    │       └── new/
    │           └── page.tsx  # 创建功能：/management/123/features/new

你之前遇到的报错大概率是操作失误（比如混淆了路由组与动态段）或使用了过旧的Next.js版本，建议升级到v13.4+的稳定版，新版本完全支持动态路由段下嵌套子路由。

2. 在子路由页面中获取项目ID #

所有子路由页面都能通过params参数直接拿到动态项目ID，无需额外处理：

• 示例：在issues/page.tsx中获取ID并调用接口

export default function IssuesPage({ params }: { params: { id: string } }) {
  // params.id 即为当前项目ID（如"123"）
  // 直接用该值调用后端接口即可
  return <div>项目 {params.id} 的问题列表</div>;
}

• 示例：在features/new/page.tsx中使用ID提交创建请求

export default function NewFeaturePage({ params }: { params: { id: string } }) {
  const handleSubmit = async (formData: FormData) => {
    await fetch(`/api/projects/${params.id}/features`, {
      method: "POST",
      body: formData,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素 */}
      <button type="submit">创建新功能</button>
    </form>
  );
}

3. 备选方案（特殊限制下的折中） #

如果因特殊场景无法在[id]文件夹下嵌套子目录，可以改用捕获所有路由，但这种方式需要自行解析路由参数，可读性稍差：

• 文件夹结构：

app/
└── management/
    └── [...projectRoute]/
        └── page.tsx

• 在page.tsx中解析路由参数：

export default function ProjectRoutePage({ params }: { params: { projectRoute: string[] } }) {
  const [projectId, subRoute, subAction] = params.projectRoute;
  // 例如访问 /management/123/issues/new，projectRoute 为 ["123", "issues", "new"]

  if (subRoute === "issues") {
    return subAction === "new" 
      ? <div>为项目 {projectId} 创建问题</div> 
      : <div>项目 {projectId} 的问题列表</div>;
  }

  // 其他路由分支逻辑...
  return <div>项目 {projectId} 的仪表盘</div>;
}

优先推荐第一种文件夹结构，代码更清晰，维护成本更低。

内容的提问来源于stack exchange，提问作者Abdullah moiz