Next.js动态路由404错误求助：点击卡片跳转详情页失败

核心原因：路由结构不符合Next.js的路由规则 #

Next.js的路由系统分为App Router（Next.js 13+）和Pages Router（传统路由），两者对文件结构的要求完全不同，你的文件夹结构大概率不符合当前使用的路由系统规范，导致路由无法被正确识别。

第一步：先确认项目使用的路由系统 #

检查项目根目录下的文件夹：

• 若存在app文件夹：使用的是App Router
• 若存在pages文件夹：使用的是Pages Router

针对App Router的解决方法 #

App Router要求每个路由路径对应一个文件夹，动态路由段需要单独建文件夹，且页面入口必须是page.jsx：

1. 调整文件夹结构
   将你的[id].jsx文件移动到如下路径：

   parent/
     src/
       app/
         single-industry/
           [id]/
             page.jsx
   

   即：src/app/single-industry/[id]/page.jsx
2. 重启开发服务器
   修改路由结构后必须重启npm run dev或yarn dev，确保新的路由规则生效。

针对Pages Router的解决方法 #

Pages Router只会识别pages目录下的文件作为路由，你的文件不在pages目录内导致路由未注册：

1. 调整文件夹结构
   将你的[id].jsx文件移动到如下路径：

   parent/
     src/
       pages/
         single-industry/
           [id].jsx
   

   即：src/pages/single-industry/[id].jsx
2. 校验文件名规范
   确保[id].jsx使用英文半角括号，文件名无拼写错误（比如不要写成ID.jsx或[id].js）。
3. 重启开发服务器
   重启服务清除旧路由缓存，让新的路由配置生效。

额外排查点 #

• 检查跳转代码：确保跳转路径是/single-industry/${id}，无多余斜杠或拼写错误。示例代码：

  // Pages Router 用 next/router
  import { useRouter } from 'next/router';
  const handleClick = (id) => {
    const router = useRouter();
    router.push(`/single-industry/${id}`);
  }
  
  // App Router 用 next/navigation
  import { useRouter } from 'next/navigation';
  const handleClick = (id) => {
    const router = useRouter();
    router.push(`/single-industry/${id}`);
  }
  

• 大小写检查：确保文件夹名single-industry和访问路径的single-industry完全一致（Next.js路由默认大小写敏感）。

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