Next.js App Router：如何为两条动态路由配置同一页面？

按照你的需求，在Next.js App Router中需要通过路由入口文件（page.jsx）导入目标组件的方式实现映射，以下是具体的目录结构和代码示例：

目录结构 #

app/
├─ catalog/
│  ├─ components/
│  │  ├─ CatalogView.jsx  # 对应你提到的 catalog.jsx
│  │  └─ ItemDetail.jsx   # 对应你提到的 id.jsx
│  ├─ page.jsx            # 映射 catalog/ 路由
│  ├─ [category]/
│  │  ├─ page.jsx         # 映射 catalog/[category] 路由
│  │  ├─ [id]/
│  │  │  ├─ page.jsx      # 映射 catalog/[category]/[id] 路由

代码实现 #

1. catalog/ 路由（对应 catalog.jsx）
   app/catalog/page.jsx：

import CatalogView from './components/CatalogView';

export default function CatalogRootPage() {
  // 可在这里添加根路由的逻辑，比如默认分类数据
  return <CatalogView />;
}

2. catalog/[category] 路由（对应 catalog.jsx）
   app/catalog/[category]/page.jsx：

import CatalogView from '../components/CatalogView';
import { useParams } from 'next/navigation';

export default function CategoryCatalogPage() {
  const { category } = useParams();
  // 将分类参数传递给CatalogView组件，用于筛选内容
  return <CatalogView category={category} />;
}

3. catalog/[category]/[id] 路由（对应 id.jsx）
   app/catalog/[category]/[id]/page.jsx：

import ItemDetail from '../../components/ItemDetail';
import { useParams } from 'next/navigation';

export default function ItemDetailPage() {
  const { category, id } = useParams();
  // 将分类和ID参数传递给ItemDetail组件，用于展示详情
  return <ItemDetail category={category} id={id} />;
}

说明 #

Next.js App Router要求每个路由必须通过page.jsx作为入口渲染，因此我们通过在对应路由目录下创建page.jsx，再导入你需要的catalog.jsx（命名为CatalogView）和id.jsx（命名为ItemDetail）组件来实现映射。这样既符合App Router的规范，又满足了你想要的组件复用和路由映射需求。

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