Next.js App Router中如何在兜底路由后添加独立的额外路由？

嘿，其实你最初的思路是完全可行的！可能是你对Next.js App Router的路由参数解析有点误解，我来给你理清楚～

你现在的路由是app/categories/[[...subCategories]]，想要在后面加独立的post/[id]路由，直接在[[...subCategories]]文件夹下创建post/[id]的路由结构就可以了，完全不会让post路径被兜底路由“吃掉”。

具体目录结构 #

app/
└── categories/
    └── [[...subCategories]]/
        ├── page.jsx  # 处理路径：/categories、/categories/1、/categories/1/2
        └── post/
            └── [id]/
                └── page.jsx  # 处理路径：/categories/post/5、/categories/1/post/2、/categories/1/2/post/1

参数解析说明 #

在post/[id]的page组件里，你可以同时拿到subCategories和id两个参数，而且subCategories只会包含post前面的分类路径，完全不会把post和id包含进去：

export default function PostPage({ params }) {
  // 示例：访问 /categories/1/2/post/1 时，params.subCategories = ["1", "2"]，params.id = "1"
  // 示例：访问 /categories/post/5 时，params.subCategories = undefined（因为是可选兜底路由）
  const { subCategories, id } = params;
  return (
    <div>
      <h1>帖子 {id}</h1>
      {subCategories && <p>所属分类路径：{subCategories.join('/')}</p>}
    </div>
  );
}

为什么你之前可能觉得不行？ #

可能你误以为兜底路由会匹配后面的所有路径，但实际上Next.js的路由是按文件夹层级解析的：[[...subCategories]]只负责匹配它所在层级的路径段，后面的post/[id]是独立的子路由，会被单独解析成参数，不会被兜底路由包含。

如果不需要支持/categories/post/5这种没有子分类的情况，你可以把[[...subCategories]]改成[...subCategories]（非可选兜底路由），这样就必须要有至少一个分类路径才能访问post路由。

这种方式完全符合App Router的设计规范，是最直接的解决方案，不需要额外的中间件或者路由重写。

备注：内容来源于stack exchange，提问作者Matthieu