如何在子文件夹中使用动态路由？Next.js路由404问题求助

调整路由结构匹配规则 #

你的文件结构里，books/reviews/[title].jsx 无法被Next.js识别为有效路由页面，尤其是使用Next.js 13+ App Router的场景下，每个路由路径必须对应一个page.jsx文件。正确的结构应该修改为：

├── books
    ├── reviews
        ├── [title]
            └── page.jsx  # 动态路由页面需放在此文件夹内
        └── page.jsx
    └── page.jsx
└── page.jsx

将原有的[title].jsx调整为[title]/page.jsx，这样/books/reviews/nextjsbook就能正确匹配到目标页面。

检查跳转链接路径准确性 #

确保书籍列表里的跳转按钮路径完整且正确，用Next.js的Link组件生成路径更稳妥，示例代码：

import Link from 'next/link';

// 书籍列表项中的跳转按钮
<Link href={`/books/reviews/${book.title}`}>查看书评</Link>

注意不要遗漏/books/reviews/前缀，避免写成/reviews/${book.title}这类错误路径。

确认动态参数正常获取 #

在新的[title]/page.jsx文件中，要正确读取路由参数，示例代码：

export default function ReviewPage({ params }) {
  const bookTitle = params.title;
  return <div>《{bookTitle}》的书评内容</div>;
}

清除缓存并重启服务 #

开发模式下修改路由结构后，重启dev服务；生产环境则重新执行npm run build再部署，避免旧缓存导致路由不生效。

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