Next 13 App目录路由与编程式导航404问题求助

核心原因 #

Next.js 13+ 的 App Router 路由规则明确：只有命名为 page.jsx（或 page.tsx）的文件才会被识别为对应路由路径的页面入口。你当前的文件命名为 dc_types.jsx，不符合App Router的路由页面命名规范，因此Next.js无法将 /dc/admin/dc_types 这个路径映射到该文件，导致404错误。

具体解决方案 #

方案1：调整文件命名与结构 #

将现有文件重命名并调整结构，使其符合App Router的路由要求：

1. 在 ./src/app/dc/admin/ 目录下创建一个名为 dc_types 的文件夹
2. 将原 dc_types.jsx 文件移动到这个新文件夹中，并重命名为 page.jsx
   最终结构应为：

src/
└── app/
    └── dc/
        └── admin/
            └── dc_types/
                └── page.jsx

完成后，/dc/admin/dc_types 路径就会正确映射到这个 page.jsx 文件，手动输入URL或使用 router.push('/dc/admin/dc_types') 都能正常访问。

方案2：直接重命名文件（适用于简化结构） #

如果不需要额外的子路由，可以直接将 ./src/app/dc/admin/dc_types.jsx 重命名为 ./src/app/dc/admin/dc_types/page.jsx，效果和方案1一致。

额外注意事项 #

• 如果 dc_types.jsx 是一个通用组件而非页面，请将其移动到项目的 components 目录下，然后在对应的路由页面（比如 ./src/app/dc/admin/page.jsx）中引入使用，不要将组件文件直接放在路由路径目录下。
• 确保你的Next.js版本在13.4及以上（App Router从该版本开始进入稳定版），避免版本兼容问题。

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