NextJS嵌套动态路由跳转时路径丢失[label]参数问题

• 当前所在分类页路径：http://localhost:3000/category/Municipality
• 异常表现：点击子分类卡片跳转时，路径中上级分类的label值丢失，实际跳转地址为http://localhost:3000/category/subcategory/44，虽然页面能正常渲染子分类内容，但路径结构不符合嵌套路由的预期。
• 目标跳转路径：http://localhost:3000/category/Municipality/subcategory/44

问题根源是跳转路径硬编码为/category/subcategory/${directory?.id}，没有把当前路由里的上级分类label参数拼进路径，按下面两步调整即可：

1. 先从当前路由上下文里取到父级分类的label动态参数：Next 13+ App Router 从next/navigation导入useParams获取参数；Pages Router 从next/router导入useRouter获取query参数。
2. 把拿到的label参数拼到跳转路径里，补全嵌套路由结构。

修正后的核心代码 #

// App Router版本导入，Pages Router替换为从next/router导入useRouter
import { useParams } from 'next/navigation';
import Link from 'next/link';

// 组件内部逻辑
const params = useParams();
// 注意字段名label要和你本地动态路由的参数命名保持一致
const currentCategoryLabel = params.label;
// 增加兜底判断，避免参数未加载完成时生成错误路径
const path = currentCategoryLabel 
  ? `/category/${currentCategoryLabel}/subcategory/${directory?.id}` 
  : '';

return (
  <List.Item key={directory.id}>
    <Skeleton avatar title={false} loading={isLoading} active>
      <Card 
        cover={<Image src={`${config.SERVER_URL}${thumbnail?.attributes?.formats?.large?.url}`} />} 
        style={{ width: 300 }} 
        loading={isLoading}
      >
        <Meta
          title={<Link href={path}>{title}</Link>}
          description={description}
        />
      </Card>
    </Skeleton>
  </List.Item>
);

补充校验：要确认本地路由目录结构和路径规则匹配，App Router对应目录应为app/category/[label]/subcategory/[id]/page.js，Pages Router对应文件应为pages/category/[label]/subcategory/[id].js，否则路径拼接正确也可能出现404问题。

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