Next.js 中如何在多个页面目录间复用同一动态路由 [id]-js教程-PHP中文网

Next.js 中如何在多个页面目录间复用同一动态路由 [id]

在 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"></productdetailpage>;
}

? 示例：`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 artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10340" title="arcgis-js"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="arcgis-js" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10340" title="arcgis-js" class="overflowclass">arcgis-js</a>
													<p class="overflowclass">提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。</p>
												</div>
												<a rel="nofollow" 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>
  );
}</product>

⚠️ 注意事项

不要尝试硬链接或 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。