我认为你正在使用最新的next.js 13应用程序路由器版本你应该像这样更新你的文件夹结构

├── books
    ├── reviews
        ├── [title]
            ├──page.jsx
│   └── page.jsx
└── page.jsx

字符串

的数据

当您尝试直接导航到此路由时（即，通过在浏览器中输入URL），它将无法找到该文件，因为它正在reviews目录中查找名为[title].jsx的文件。这就是为什么您会收到404错误。
因此，我建议使用next/link中的Link组件进行导航，使用next/router中的useRouter钩子访问动态路由参数。
范例：

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function BookList({ books }) {
 const router = useRouter();

 return (
   <div>
     {books.map((book) => (
       <Link href={`/books/reviews/${book.title}`} key={book.title}>
         <a>{book.title}</a>
       </Link>
     ))}

     {router.query.title && (
       <div>
         <h1>{router.query.title}</h1>
         <p>This is the review page for {router.query.title}.</p>
       </div>
     )}
   </div>
 );
}

字符串
Link用于为每本书创建一个到评论页面的链接。然后，href prop被设置为评论页面的路径，书名被包含为动态片段。
useRouter钩子用于访问动态路由参数，如果title查询参数存在于URL中，则会呈现一个带有标题和消息的div。