Next.js多分类目录共享单个[id]动态路由可行性咨询

当然可以实现，不用在每个分类目录下重复创建[id]路由，下面给你两种实用方案：

方案一：重构路由结构（推荐，符合Next.js设计理念） #

直接把分类也改成动态参数，让单个[id]路由适配所有分类，新的目录结构如下：

my-nextjs-app/
|-- src/
    |-- app/
        |-- [category]/
            |-- [id]/
                |-- page.tsx  # 所有分类共用的动态详情页
            |-- page.tsx      # 分类列表页（对应原来men/women/teen的page.tsx）
    |-- components/
    |-- styles/

在共用的[id]/page.tsx里，通过params获取分类和ID参数，再根据分类渲染对应内容：

// src/app/[category]/[id]/page.tsx
export default function ProductDetailPage({ params }: { params: { category: string, id: string } }) {
  const { category, id } = params;
  
  // 这里可以根据category和id请求对应数据，比如men分类下ID为123的商品
  return (
    <div>
      <h2>{category} 分类 - 商品ID：{id}</h2>
      {/* 渲染商品详情内容 */}
    </div>
  );
}

这样访问/men/101、/women/202、/teen/303都会走到这个页面，完全复用同一个[id]路由逻辑。

方案二：保留原有目录，提取共用组件 #

如果不想改动现有分类目录结构，可以把[id]页面的核心逻辑提取成共用组件，每个分类的[id]页面只做简单的参数传递：

1. 先创建一个共用的商品详情组件：

src/
|-- components/
    |-- ProductDetail.tsx  # 所有分类共用的详情组件
    |-- men/
    |-- women/
    |-- teen/

// src/components/ProductDetail.tsx
type Props = {
  category: 'men' | 'women' | 'teen';
  id: string;
};

export default function ProductDetail({ category, id }: Props) {
  // 这里写共用的详情逻辑，比如请求对应分类的商品数据
  return (
    <div>
      <h2>{category.toUpperCase()} - 商品ID：{id}</h2>
      {/* 渲染详情内容 */}
    </div>
  );
}

2. 然后修改每个分类下的[id]/page.tsx，直接引入这个组件：

// src/components/men/[id]/page.tsx
import ProductDetail from '../../ProductDetail';

export default function MenProductPage({ params }: { params: { id: string } }) {
  return <ProductDetail category="men" id={params.id} />;
}

women和teen目录下的[id]/page.tsx只需要把category参数改成对应值即可，核心逻辑完全复用。

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