使用useRouter跳转至ThankYou页面时出现404错误，求助

核心问题 #

你的404错误本质是Next.js路由规则不匹配，项目结构和URL路径完全不符合框架的路由规范：

• 手动访问的http://localhost:3000/pages/ThankYou是错误路径，Next.js不会将pages目录作为URL路径的一部分
• 项目结构app -> pages -> ThankYou.tsx混淆了Pages Router与App Router的目录规则

针对性解决方案 #

根据你使用的Next.js路由模式，二选一调整：

方案1：使用传统Pages Router #

1. 调整项目结构：将pages目录从app文件夹下移动到项目根目录，最终路径为：

   项目根目录 -> pages -> ThankYou.tsx
   

2. 验证访问路径：直接访问http://localhost:3000/ThankYou即可打开页面
3. 代码无需修改：当前的router.push('/ThankYou')完全符合Pages Router的跳转规则

方案2：使用Next.js 13+ App Router #

如果项目基于App Router创建：

1. 重构页面结构：按照App Router要求，将ThankYou页面改为以下结构：

   app -> ThankYou -> page.tsx
   

   注意：必须将文件名改为page.tsx，不能保留ThankYou.tsx
2. 修正跳转代码：确保useRouter从App Router的包导入，跳转路径对应文件夹名：

   // 导入正确的useRouter
   import { useRouter } from 'next/navigation';
   
   // 跳转代码保持不变（对应app/ThankYou文件夹）
   router.push('/ThankYou');
   

3. 验证访问路径：访问http://localhost:3000/ThankYou即可正常打开页面

额外检查点 #

• 确认ThankYou.tsx（或page.tsx）的导出方式正确：必须使用export default ThankYou
• 如果使用App Router，确保app目录下不存在pages目录（框架会优先识别App Router，导致Pages Router的页面失效）

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