使用s3_website gem部署React应用至S3时刷新自定义路由遇404问题

嘿，这个问题我之前也碰到过！其实核心原因就是S3是静态存储服务，它只会按请求路径去查找对应的文件，根本不知道React的前端路由是在浏览器端解析的。要搞定这个，你只需要在s3_website.yml里添加以下关键配置就行：

必要的配置项 #

在你的配置文件里加上这两段：

# 当S3找不到对应文件时，返回index.html（让React路由接手处理）
error_document: index.html

# 把所有非文件请求重定向到index.html，同时保留原路径供React路由解析
redirects:
  - from: '/*'
    to: '/index.html'
    status: 200

配置细节解释 #

• error_document: index.html：告诉S3，当它找不到请求的对象时，不要返回默认的404页面，而是返回你的React入口文件index.html。这样刷新自定义路由时，S3会先返回index.html，然后React的路由就能解析当前路径并渲染正确的组件。
• 重定向规则：from: '/*'会匹配所有路径请求，to: '/index.html'指定跳转到入口文件，status: 200是关键——用200状态码而不是3xx重定向，这样浏览器会认为这是正常响应，不会产生额外跳转，同时也不会影响SEO和用户体验。

额外注意点 #

• 确保你的React项目用的是BrowserRouter（而非HashRouter），HashRouter通过URL哈希值处理路由，不会触发S3的文件查找，但BrowserRouter的URL更美观，也是大部分项目的首选。
• 部署前确认index.html确实在S3存储桶的根目录，并且所有React构建产物（比如static文件夹）都正确上传完成。

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