AWS Amplify部署React路由应用遇AccessDenied及空白页问题

问题描述 #

用AWS Amplify部署React应用后，根URL（如example.com）可正常访问，但直接访问子URL（如example.com/something）会出现AccessDenied错误。React Router代码如下：

import { BrowserRouter, Routes, Route } from "react-router-dom";

const Router = () => {
    return ( 
        <React.Fragment>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={
                        <React.Fragment>
                            <Footer/>
                        </React.Fragment>
                    } />

                    <Route path="something" element={
                        <React.Fragment>
                            <Something/>
                            <Footer/>
                        </React.Fragment>
                    } />
                </Routes>
            </BrowserRouter>
        </React.Fragment>
    )
}

尝试配置重定向规则后，AccessDenied错误消失，但React Router无法正常工作，页面显示空白的index.html。后续更新发现访问首页也显示空白，控制台报错：

TypeError: undefined is not an object (evaluating 'l[e].call')

对应代码行：

return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports

排查与解决步骤 #

1. 调整Amplify重定向规则 #

原正则规则过于复杂，可替换为更简洁且有效的规则，确保所有非静态资源请求都交由React Router处理：

[
  {
    "source": "/*",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]

该规则会将所有路径请求（Amplify自动识别的静态资源除外）重定向到index.html，让React Router接管路由逻辑。若担心静态文件被误处理，再考虑使用更精准的正则过滤。

2. 验证本地构建与路由功能 #

• 本地执行npm run build生成生产包，再用serve -s build启动本地服务器测试，确认路由（包括直接访问子路径）是否正常。如果本地也出现相同问题，说明问题出在React代码或构建配置，与Amplify无关。
• 检查package.json中的homepage配置：若设置了"homepage": "."可能导致资源加载路径错误，建议改为"homepage": "/"或直接删除该字段（Create React App默认会自动处理正确路径）。

3. 解决控制台模块加载错误 #

TypeError: undefined is not an object (evaluating 'l[e].call')通常与webpack模块加载异常有关，可按以下步骤排查：

• 清理本地缓存：删除node_modules、package-lock.json（或yarn.lock），重新执行npm install和npm run build。
• 检查Amplify构建设置：在Amplify控制台的构建配置中，确认构建命令为npm run build，无自定义脚本导致资源打包异常。
• 检查组件与依赖：确认Something、Footer等组件的导入和渲染无错误，同时验证React Router版本（v6+）的写法是否符合规范（你的路由代码写法是正确的，重点排查其他组件）。

4. 确认Amplify部署资源完整性 #

进入Amplify控制台的部署文件列表，检查build文件夹下的所有资源（JS、CSS、静态文件）是否正确上传，确保index.html中的资源引用路径为绝对路径（如/static/js/main.xxx.js）而非相对路径。

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