Next.js应用中页面跳转出现404错误的原因咨询

核心问题 #

Next.js 中 <Link> 组件的相对路径是基于当前页面的路由路径解析，而非文件系统里的文件路径。这是你遇到跳转错误的根本原因。

错误路径的具体解析过程 #

1. 初始跳转正常的原因：
   初始渲染的是根路由 /，点击 <Link href="../pages/authentication/SignUp"> 时，根路径的 ../ 等价于根目录 /，拼接后得到正确路由 /pages/authentication/SignUp。
2. 后续跳转错误的原因：
   进入 /pages/authentication/SignUp 页面后，当前路由层级为 /pages/authentication/SignUp：
   • ../ 会将路由回退到上一级 /pages/authentication/
   • 再拼接你写的 pages/authentication/SignIn，最终得到错误路径 /pages/authentication/pages/authentication/SignIn（和你看到的 /pages/pages/authentication/SignIn 属于同一类相对路径解析错误）

为什么 ../SignUp 能正常工作 #

当你在 /pages/authentication/SignIn 页面时，../SignUp 的解析逻辑是：

• ../ 回退到 /pages/authentication/
• 拼接 SignUp 后得到正确路由 /pages/authentication/SignUp
  同理，在 /pages/authentication/SignUp 页面用 ../SignIn 也会得到正确的目标路由，完全匹配你的路由结构。

优化建议 #

• 同层级路由跳转（比如 authentication 下的 SignUp 和 SignIn），直接使用短相对路径 ../SignIn/../SignUp 即可。
• 跨层级跳转建议使用绝对路径（以 / 开头），比如 <Link href="/pages/authentication/SignIn">，这样无论当前处于哪个路由，都会直接跳转到目标路径，彻底避免相对路径解析错误。

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