React应用部署AWS Amplify后反复白屏，寻求自动修复方案

核心原因 #

React是单页应用（SPA），路由由前端JavaScript处理。刷新页面时，浏览器会直接请求对应路径的静态资源，而Amplify服务器上不存在该路径的文件，返回404导致白屏；首次部署后白屏则是因为默认重定向规则未正确配置，Amplify未将请求指向index.html。

问题1：让Amplify自动处理重定向规则，无需手动修改 #

可以通过项目配置文件固化规则，每次部署自动应用，两种实现方式：

方法1：修改/添加项目根目录的amplify.yml #

在文件中添加rewrites配置，确保所有非静态资源请求都转发到index.html：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewrites:
    - source: /<^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
      target: /index.html
      status: 200

此规则会排除CSS、JS、图片等静态资源，仅重定向路由路径请求，避免影响静态资源加载。

方法2：在Amplify控制台配置永久规则 #

1. 进入Amplify控制台对应应用的Rewrites and Redirects页面
2. 删除现有冲突规则，添加新规则：
   • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
   • 目标地址：/index.html
   • 类型：200 (Rewrite)
3. 保存后，后续部署会自动沿用此规则，无需手动调整。

问题2：刷新页面白屏的原因及彻底解决 #

原因 #

刷新非根路径时，浏览器直接向Amplify请求该路径的资源，但SPA只有一个index.html文件，服务器找不到对应资源返回404，React无法加载处理路由，导致白屏。

彻底解决 #

通过上述配置正确的200重定向规则，让所有路由路径请求都返回index.html，由React Router接管路由处理。同时确保React Router配置正确：

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 配置所有需要的路由 */}
      </Routes>
    </Router>
  );
}

确保使用BrowserRouter而非HashRouter，后者会在URL中添加#，虽然也能避免刷新问题，但不符合常规路由格式。

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