yarn build构建的React应用出现首页502、子路由404问题求助

问题根因 #

• .htaccess 中的 FallbackResource / 配置错误。Apache 的 FallbackResource 指令要求指定实际存在的 fallback 文件路径，你填写的是根路径 / 未明确指向入口文件 index.html，请求根路径时会重复触发 fallback 逻辑形成死循环，最终抛出 502 错误。
• package.json 中的 "homepage": "." 配置会强制所有静态资源使用相对路径加载，属于潜在隐患，配合路由 fallback 时容易在深层子路由出现资源加载异常。

解决步骤 #

1. 修改 .htaccess 配置 #

你可以二选一使用以下配置，都能实现SPA路由的 fallback 能力：

方案A（标准重写规则，兼容性更好）

替换原有配置为如下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

方案B（简化FallbackResource配置）

直接把原有配置修改为：

FallbackResource /index.html

明确指定 fallback 到入口文件，即可避免根路径死循环问题。

2. 调整 package.json 配置（可选，推荐） #

把 "homepage": "." 改为你的站点完整域名如 "homepage": "https://www.something.com"，也可以直接删除该配置项，CRA 会默认假设应用部署在域名根路径，所有静态资源会用绝对路径加载，避免深层子路由的资源加载异常。

3. 重新构建部署 #

执行 yarn build 重新生成生产包，把新的 build 目录内容和修改后的 .htaccess 文件一起上传到服务器即可生效。

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