在 Next.js 中，可通过创建共享的动态路由组件并由各分类目录引用它，实现 men/、women/ 和 teen/ 等多个路径下共用同一个 [id] 逻辑，避免代码重复且保持路由语义清晰。

在 next.js 中，可通过创建共享的动态路由组件并由各分类目录引用它，实现 `men/`、`women/` 和 `teen/` 等多个路径下共用同一个 `[id]` 逻辑，避免代码重复且保持路由语义清晰。

Next.js 的 App Router（推荐方式）支持灵活的文件结构设计，但不能直接跨文件夹复用同一 [id] 文件——每个 src/app/[id]/page.tsx 都会映射到根级 /[id] 路由。因此，要实现“多分类共享同一动态 ID 处理逻辑”，关键在于分离路由声明与业务逻辑：将动态页面的渲染逻辑提取为可复用组件或自定义 Hook，并在各分类的 [id]/page.tsx 中统一调用。

以下是推荐的工程化实践方案：

✅ 正确结构（App Router + 逻辑复用）

src/app/
├── men/
│   ├── [id]/
│   │   └── page.tsx     # ← 路由入口：解析 params.id + 传入 category = 'men'
│   └── page.tsx         # Men 主页
├── women/
│   ├── [id]/
│   │   └── page.tsx     # ← 路由入口：解析 params.id + 传入 category = 'women'
│   └── page.tsx         # Women 主页
├── teen/
│   ├── [id]/
│   │   └── page.tsx     # ← 路由入口：解析 params.id + 传入 category = 'teen'
│   └── page.tsx         # Teen 主页
└── components/
    └── ProductDetailPage.tsx  # ← 共享核心逻辑组件（接收 id + category）

? 示例：src/app/men/[id]/page.tsx

import ProductDetailPage from '@/components/ProductDetailPage';

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

? 示例：src/components/ProductDetailPage.tsx

'use client';

import { useEffect, useState } from 'react';

interface Product {
  id: string;
  name: string;
  category: string;
}

export default function ProductDetailPage({ 
  id, 
  category 
}: { 
  id: string; 
  category: 'men' | 'women' | 'teen' 
}) {
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟根据 category + id 获取数据
    const fetchProduct = async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/products?category=${category}&id=${id}`);
        const data = await res.json();
        setProduct(data);
      } catch (err) {
        console.error('Failed to load product', err);
      } finally {
        setLoading(false);
      }
    };
    fetchProduct();
  }, [id, category]);

  if (loading) return <div>Loading...</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <article>
      <h1>{product.name}</h1>
      <p>Category: {product.category}</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill10340" title="arcgis-js"><img
                                                                                src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="arcgis-js" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill10340" title="arcgis-js">arcgis-js</a>
                                                                        <p>提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。</p>
                                                                </div>
                                                                <a href="/xiazai/skill10340" title="arcgis-js" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
      <p>ID: {product.id}</p>
      {/* 其他通用 UI 或按 category 分支的定制逻辑 */}
      {category === 'teen' && <div className="badge">Teen Exclusive</div>}
    </article>
  );
}

⚠️ 注意事项

• 不要尝试硬链接或 symlink：Next.js 构建时不会识别符号链接，且破坏可维护性；
• 服务端组件限制：若需 SSR 数据获取，请使用 generateStaticParams + async page.tsx（适用于静态生成），或在 ProductDetailPage 中使用 fetch（客户端组件）或 getServerSideProps 替代方案（Pages Router）；
• Pages Router 用户注意：该方案同样适用，只需将 pages/men/[id].tsx 内容改为导出 ProductDetailPage 的封装即可；
• SEO 友好性：每个路径（如 /men/123、/women/456）仍独立生成 HTML，搜索引擎可正常索引，不影响 SEO。

通过这种「路由隔离 + 逻辑聚合」的设计，你既保留了语义化 URL 结构（/men/123 明确表示男士商品），又实现了核心逻辑的单一维护点，大幅提升可扩展性与可测试性。