React Router V6 构建后静态资源路径错误的解决方案

react router v6 项目构建部署后出现 `404` 加载 chunk 文件失败，根本原因是 webpack 打包时生成的静态资源路径（如 `/scenarioplanning/Static/js/…`）被错误地相对化，需通过配置 `homepage` 字段或服务器重写规则修复。

该问题并非由 proxy 字段解决——您在答案中提到的 “proxy”: “http://127.0.0.1:5000” 仅在开发阶段（npm start）生效，用于代理 API 请求，对生产构建（npm run build）完全无效，也无法修正静态资源路径。实际报错 http://localhost:5000/scenarioplanning/static/js/251.400bc25d.chunk.js 表明：Webpack 将 public 下的资源（如 JS/css）按当前路由路径做了相对解析，导致子路径下资源请求路径错误。

✅ 正确解决方案如下：

1. 设置 homepage 字段（推荐，零配置服务端）

在 package.json 中添加：

{   "homepage": "/" }

✅ 原理：homepage: “/” 告诉 Create react app 所有静态资源（、、public/ 中图片等）均以绝对根路径（/static/js/…）加载，与当前 URL 路径无关。 ⚠️ 注意：若部署在子路径（如 https://example.com/my-app/），则应设为 “homepage”: “/my-app/”，并同步配置 。

2. 配置 Webpack（自定义配置场景）

若使用 craco 或 react-app-rewired，可在 craco.config.js 中覆盖 output.publicPath：

module.exports = {   webpack: {     configure: (config) => {       config.output.publicPath = '/';       return config;     }   } };

3. 服务端适配（nginx / express / serve）

• Nginx：确保 try_files 指向 index.html，避免子路径返回 404：

  location / {   try_files $uri $uri/ /index.html; }

• serve（本地测试）：使用 -s 参数启用单页应用模式：

  npx serve -s build

  它会自动处理所有路径回退到 index.html，且默认以 / 为资源根路径。

? 验证方式

构建后检查 build/index.html 中的 script 标签：

? 总结：proxy 不解决构建路径问题；homepage 是最轻量、最可靠的方案；务必配合服务端 SPA 路由回退机制，才能让 React Router V6 在任意路径下正确加载资源与渲染组件。