Heroku部署React应用访问二级子路由重载出现白屏报错如何解决？

问题根因 #

你遇到的报错本质是静态资源路径匹配错误：

• 你最初配置"homepage": "."时，React打包后会用相对路径加载JS、CSS、manifest.json等静态资源
• 当你访问/settings/devices这类多级子路由并刷新时，浏览器会以当前路由路径为基准拼接静态资源地址，比如会请求/settings/devices/static/js/main.xxx.chunk.js而非根路径下的/static/js/main.xxx.chunk.js
• 由于Heroku上你已经配置了SPA路由 fallback（所有非静态资源请求都返回index.html），所以这个错误路径的请求返回的是HTML内容，JS解析器读到HTML的首字符<时就抛出了语法错误，manifest.json同理也是拿到了HTML内容报错
• 本地环境正常是因为React开发服务器默认处理了路径匹配和路由 fallback，不会出现相对路径拼接错误的情况

解决方案 #

如果你不需要将React应用部署在站点子目录下，直接修改package.json中的homepage配置为根路径即可，该配置适配所有部署在域名根路径下的场景，无需随部署平台更换修改：

{
  "homepage": "/"
}

如果后续你需要将应用部署在站点子目录（比如https://domain.com/my-app/），再将homepage修改为对应子目录路径即可。

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