部署在Heroku的React应用访问多段URL路径时出现白屏如何解决？

问题原因 #

• 静态资源加载路径错误：你的package.json中homepage字段配置为"."，代表使用相对路径加载静态资源。当访问/explore/data-scientist这类多级路径时，浏览器会尝试从/explore/目录下加载页面所需的js、css等静态文件，但这些文件实际存放在站点根目录，资源加载失败直接导致白屏。
• 服务端未适配前端路由规则：你使用的react-router-dom默认是BrowserRouter模式，依赖HTML5 History API实现无刷新路由跳转。当直接访问多级路径时，服务端默认会去匹配对应路径的静态资源，找不到对应资源就会返回404，没有重定向到单页应用的入口index.html。你当前start命令中的serve -s build已经开启了单页重定向模式，所以这部分不是主要问题，优先修复homepage配置即可。

解决方案 #

1. 修改package.json中的homepage配置，将"homepage": "."改为"homepage": "/"，强制所有静态资源从站点根路径加载，不受当前页面路径影响。
2. 配置修改后重新部署到Heroku即可生效。如果修改后仍有问题，可以临时将React路由的BrowserRouter替换为HashRouter验证，HashRouter通过URL的hash值实现路由，不需要服务端额外适配，缺点是URL中会带有#符号。

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