在AWS部署React网站时react-router-dom路由识别异常问题

你的问题核心是S3静态网站托管默认会根据URL路径查找对应文件：比如访问https://website.com/something时，S3会尝试读取something.html文件，但你的SPA只有index.html，因此返回404状态码。虽然前端路由能正常跳转页面，但搜索引擎、PageSpeed等工具会以HTTP状态码为准，404会被判定为页面不存在。

以下是具体解决步骤：

1. 配置CloudFront自定义错误响应（生产环境推荐方案） #

如果你的网站搭配了CloudFront，通过自定义错误规则把404/403请求重定向到index.html并返回200状态码：

• 打开CloudFront控制台，找到你的分发实例
• 进入「错误页面」标签，点击「创建自定义错误响应」
• 错误代码选404: Not Found，设置：
  • 自定义错误响应：开启
  • 响应页面路径：/index.html
  • HTTP响应代码：200: OK
• 重复上述步骤添加403: Forbidden的规则
• 保存后等待CloudFront分发更新（通常需要10-15分钟）

2. 纯S3静态网站的临时 workaround（不推荐生产环境使用） #

如果未使用CloudFront，S3本身的静态网站托管无法修改错误文档的状态码，只能为每个路由手动上传空文件并设置重定向：

• 比如为/something路由创建空的something.html文件，在S3控制台设置该文件的重定向目标为index.html
• 这种方法仅适用于路由极少的场景，路由较多时维护成本极高

3. 确认React Router配置正确性 #

确保项目使用BrowserRouter而非HashRouter，路由配置示例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/something" element={<Something />} />
      </Routes>
    </Router>
  );
}

完成以上配置后，所有路由URL都会返回200状态的index.html，前端路由会接管页面渲染，搜索引擎和PageSpeed工具就能正确识别并抓取页面内容。

内容的提问来源于stack exchange，提问作者D'arganatan