Create-react-app创建的项目打包后页面空白的解决方法

问题描述：

当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。

解决方法：

此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下：

"homepage": "./",

当添加了这一行配置之后重新打包部署，可能很大几率会解决页面空白的问题。但是也有不少的情况还是会存在页面空白，但是此时我们会发现浏览器控制台已经不报错误了，仅仅只是前端页面空白。这个时候我们就要去代码里检查一下使用的路由组件有没有问题，如果你是用的组件是BrowserRouter，那么我们打包部署的项目在浏览器端解析时就会出现问题，也就是会出现页面空白的情况，这个时候我们需要将路由组件切换为HashRouter，如下：

import { HashRouter as Router, Route } from 'react-router-dom';

通过以上的优化，我们就会发现页面空白的问题已经得到解决了。