如何为Next.js+TypeScript嵌套动态路由添加末尾特定页面？

核心思路 #

利用Next.js的动态Catch-All路由匹配无限层级的分类路径，同时通过/-/作为分隔符，将分类路径与操作页面（如settings/people）明确区分，避免路由冲突。

方法一：App Router（Next.js 13+ 推荐） #

1. 目录结构 #

按照以下结构创建页面文件，确保路由能匹配你的需求：

app/
├─ [mainCategory]/
│  ├─ [[...subCategories]]/
│  │  ├─ page.tsx          # 原分类页面（如/groups/sports/football）
│  │  └─ -/
│  │     └─ [action]/
│  │        └─ page.tsx    # 操作页面（如/groups/sports/football/-/settings）

2. 操作页面实现（/-/[action]/page.tsx） #

通过params获取分类层级和操作类型，实现类型安全的渲染：

// app/[mainCategory]/[[...subCategories]]/-/[action]/page.tsx
type RouteParams = {
  mainCategory: string;
  subCategories?: string[];
  action: string;
};

export default function ActionPage({ params }: { params: RouteParams }) {
  const { mainCategory, subCategories = [], action } = params;
  
  // 根据action渲染对应内容（如settings/people）
  const renderContent = () => {
    switch (action) {
      case 'settings':
        return <div>这里是{mainCategory}/{subCategories.join('/')}的设置面板</div>;
      case 'people':
        return <div>这里是{mainCategory}/{subCategories.join('/')}的人员管理页面</div>;
      default:
        return <div>未知操作页面</div>;
    }
  };

  return (
    <div className="container">
      <h1>{mainCategory} - {subCategories.join('/')}</h1>
      <h2>{action} 页面</h2>
      {renderContent()}
    </div>
  );
}

3. 原分类页面实现（[[...subCategories]]/page.tsx） #

保持原有的无限嵌套分类渲染逻辑：

// app/[mainCategory]/[[...subCategories]]/page.tsx
type RouteParams = {
  mainCategory: string;
  subCategories?: string[];
};

export default function CategoryPage({ params }: { params: RouteParams }) {
  const { mainCategory, subCategories = [] } = params;
  
  return (
    <div className="container">
      <h1>{mainCategory} - {subCategories.join('/')}</h1>
      {/* 原分类页面的业务内容 */}
    </div>
  );
}

方法二：Pages Router（Next.js 12及以下） #

1. 目录结构 #

对应Pages Router的目录结构如下：

pages/
├─ [mainCategory]/
│  ├─ [[...subCategories]]/
│  │  ├─ index.tsx         # 原分类页面
│  │  └─ -/
│  │     └─ [action].tsx   # 操作页面

2. 操作页面实现（-/[action].tsx） #

通过useRouter获取路由参数：

// pages/[mainCategory]/[[...subCategories]]/-/[action].tsx
import { useRouter } from 'next/router';

export default function ActionPage() {
  const router = useRouter();
  const { mainCategory, subCategories, action } = router.query;
  
  // 处理参数类型，确保是数组
  const subCategoriesArray = Array.isArray(subCategories) ? subCategories : [];

  return (
    <div className="container">
      <h1>{mainCategory} - {subCategoriesArray.join('/')}</h1>
      <h2>{action} 页面</h2>
      {action === 'settings' ? (
        <div>设置面板内容</div>
      ) : action === 'people' ? (
        <div>人员管理内容</div>
      ) : (
        <div>未知操作</div>
      )}
    </div>
  );
}

关键注意事项 #

• 路由优先级：Next.js会优先匹配更具体的路由，因此/-/[action]的路由会比Catch-All分类路由先匹配，不会出现冲突。
• 分隔符作用：使用/-/作为分类与操作的分隔符，能有效避免操作名（如settings）与子分类名重名导致的路由混淆，是业内常用的路由设计方案。
• 类型安全：在TypeScript中通过定义RouteParams类型，确保参数的类型正确性，避免运行时错误。

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