Next.js App Router：如何处理多分类及子分类动态路由？

错误原因分析 #

你之前的路由结构报错是因为捕获所有路由（[...category]）必须作为URL的最后一段，Next.js的路由匹配规则不允许捕获所有路由节点后面再定义其他路由段，所以[...category]后放[product]的写法不合法。

首选方案：单捕获所有路由+后端数据判断 #

这是最简洁且符合Next.js设计思路的方案，用单个[...slug]捕获所有路径，通过后端数据判断当前路径是分类页还是产品页：

路由结构 #

app/
  [...slug]/
    page.tsx
    layout.tsx

实现逻辑 #

1. 在page.tsx中获取params.slug数组：比如访问category2/category3/product2时，slug为["category2", "category3", "product2"]
2. 结合后端API判断最后一段内容的类型：
   • 如果是产品ID/别名，渲染产品页面组件
   • 如果是分类ID/别名，渲染分类页面组件
   • 都匹配不上则返回404

示例简化代码：

// app/[...slug]/page.tsx
import { getCategoryBySlug, getProductBySlug } from '@/lib/api';

export default async function Page({ params }: { params: { slug: string[] } }) {
  const lastSegment = params.slug.at(-1);
  // 先尝试匹配产品
  const product = await getProductBySlug(lastSegment);
  if (product) {
    return <ProductPage product={product} />;
  }
  // 产品不存在则匹配分类
  const category = await getCategoryBySlug(lastSegment);
  if (category) {
    return <CategoryPage category={category} />;
  }
  // 404页面
  return <div>页面不存在</div>;
}

这个方案完全靠数据逻辑区分页面类型，不会出现路由冲突或构建时的渲染问题。

修复你当前的并行路由方案（不推荐） #

如果坚持要用并行路由，需要解决Next.js同时渲染两个路由的问题，通过路由组和条件渲染控制只显示对应内容：

调整后的路由结构 #

app/
  [...slug]/
    (category)/
      page.tsx
    (product)/
      page.tsx
    layout.tsx

实现逻辑 #

在layout.tsx中根据后端数据判断路径类型，只渲染对应的路由组内容：

// app/[...slug]/layout.tsx
import { getCategoryBySlug, getProductBySlug } from '@/lib/api';

export default async function Layout({ 
  children, 
  params 
}: { 
  children: {
    '(category)': React.ReactNode;
    '(product)': React.ReactNode;
  };
  params: { slug: string[] };
}) {
  const lastSegment = params.slug.at(-1);
  const product = await getProductBySlug(lastSegment);
  
  // 匹配到产品则渲染产品路由组，否则渲染分类路由组
  return product ? children['(product)'] : children['(category)'];
}

此方案需要额外处理404场景，且逻辑复杂度高于首选方案，仅作为备选。

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