Next.js动态路由路径重复category导致404问题求助

常见原因及修复方案 #

1. 链接跳转误用相对路径 #

如果在/category页面内的分类链接使用了相对路径（比如<Link href="./category/female">），会在当前路径基础上拼接新路径，最终生成/category/category/female这类重复路径。

修复方式：
改用绝对路径（开头加斜杠）：

<Link href="/category/female">女装</Link>

使用useRouter跳转时同样确保路径为绝对路径：

import { useRouter } from 'next/router';

const router = useRouter();
router.push('/category/female');

2. 动态路由文件夹结构错误 #

若你的动态路由文件夹层级是pages/category/category/[slug].js，访问时自然会出现两层category路径。

修复方式：
调整文件夹结构为pages/category/[slug].js，对应路由就会变成/category/[slug]，避免重复。

3. 重定向逻辑路径拼接错误 #

在getServerSideProps或redirects.js的重定向代码中，若不小心重复拼接了category/，也会导致路径重复。

比如错误代码：

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: `/category/category/${context.params.slug}`,
      permanent: false,
    },
  };
}

修复方式：
修正重定向目标路径，移除多余的category/：

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: `/category/${context.params.slug}`,
      permanent: false,
    },
  };
}

4. 导航组件路径配置错误 #

全局导航组件中若错误地将分类链接写成/category/category/[slug]格式，点击时也会生成重复路径。

修复方式：
检查导航组件内所有分类链接，确保路径为/category/[slug]格式。

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