ReactJS前端部署后直接访问子路径出现404错误求助

这个问题的核心原因是：React单页应用（SPA）用的是客户端路由，只有根路径（/）对应实际存在的index.html文件。直接访问子路径时，服务器/CDN会尝试找对应路径的物理文件（比如/login对应login.html），找不到就返回404；而应用内导航是通过JS在客户端切换组件，不会触发新的服务器请求，所以能正常工作。

下面分两种部署场景给出具体解决步骤：

一、AWS S3 + CloudFront 部署场景 #

1. S3存储桶配置调整 #

• 打开S3控制台，找到你的应用存储桶
• 进入「属性」标签，拉到「静态网站托管」区域：
  • 启用静态网站托管，设置「索引文档」为index.html
  • 必须设置「错误文档」为index.html——这样S3遇到404时会返回主页，交给React路由处理

2. CloudFront分发配置调整 #

• 打开CloudFront控制台，找到你的分发
• 进入「行为」标签，编辑默认行为：
  • 找到「错误页面」设置，添加自定义错误响应：
    • HTTP错误代码：404
    • 缓存TTL：建议设为0（避免缓存错误页面）
    • 自定义响应页面路径：/index.html
    • HTTP响应代码：200（把404转为200状态码，让客户端路由正常接管）
• 确认CloudFront的「默认根对象」已设置为index.html

二、Vercel部署场景 #

Vercel对SPA支持很友好，只需在项目根目录添加vercel.json文件：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

这个配置会把所有路径的请求都重写到index.html，让React路由处理跳转逻辑。

验证方法 #

• 部署修改后的配置或代码
• 直接访问子路径（比如example.in/login），确认能正常加载对应页面
• 刷新子路径页面，检查是否还会返回404

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