React部署Netlify后带id路径刷新白屏报Unexpected token '<'错误

这是SPA（单页应用）采用BrowserRouter做客户端路由时，静态托管服务的典型适配问题：

• 你使用的BrowserRouter依赖HTML5 History API，本地开发时webpack-dev-server默认开启了history fallback配置，所有路径请求都会返回根目录index.html，所以刷新不会出问题
• Netlify默认只会对存在的静态文件路径返回对应资源，当你访问/movie/580489这类多级路径刷新时，Netlify找不到对应路径的静态资源，会默认返回index.html的内容；此时浏览器请求页面依赖的JS/CSS等静态资源时，会把当前多级路径作为基准路径拼接资源地址，返回的却是index.html的<开头内容，就会抛出Uncaught SyntaxError: Unexpected token '<'错误
• /movies属于一级路径，Netlify默认可以命中到根目录的index.html，所以刷新正常

按照以下步骤操作即可修复：

1. 在React项目的public文件夹根目录下新建名为_redirects的文件，注意该文件没有后缀名
2. 在_redirects文件中写入如下规则：

/*    /index.html   200

3. 确认你的package.json中没有配置错误的homepage字段：如果配置了相对路径，删除该字段或者将值改为你站点的完整域名即可
4. 重新打包项目并部署到Netlify，刷新多级路径的问题就会解决

该规则是Netlify专属的重定向配置，含义为所有路径的请求全部重定向到根目录的index.html，后续路由逻辑交由客户端的React Router处理，不会修改请求的状态码也不会影响路由匹配。

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