react白屏的原因是HtmlWebpackPlugin插件在引入bundle.js时，引入的是相对路径，其解决办法：1、在output配置中加入publicPath；2、在history模式下，将historyApiFallback设置为true即可。
本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react白屏原因是什么？
react history模式下的白屏问题
近期，再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了，结果带来了一些问题，比如刷新白屏，还有图片加载不出来，这里我们说一下解决方案。
原因
首先，我们说一下造成这一系列现象的原因。
我们在http://localhost:xxxx/这个路径下去刷新页面是没有问题的，一切都显得那么正常，但是当我们换到一个子模块，刷新就会白屏，为什么呢？
我们看到，它会从当前路径下去找bundle.js，为什么？因为HtmlWebpackPlugin插件在帮我们引入bundle.js时，引入的是相对路径
所以，在刷新时，它是相对于现在的url取寻找的。
解决方案
原因一旦清楚，解决方案便呼之欲出了。我们只要想办法让bundle.js的加载路径在刷新的时候，也从根目录开始寻找，而不是跟随当前url即可。
1.output配置加入publicPath
output: { filename: 'assets/js/bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: "/"}
登录后复制
publicPath是什么意思呢？官网中有这么一句话
webpack-dev-server 也会默认从 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。
简单理解，你的静态资源，都会从此路径下开始加载
publicPath: “/” //加载路径‘/assets/js/bundle.js’
这样，每次刷新都会从根目录开始加载，就不会丢失我们的bundle.js了。图片加载不出来也是这个问题。
2.webpack-dev-server的historyApiFallback
history模式下，devServer需要配置historyApiFallback为true
devServer: {historyApiFallback: true}
登录后复制
注意以上两点，history模式就能正常使用了。如果还有其他原因，欢迎大家补充。
ps:项目部署上服务器后，页面白屏，需要后台进行相关设置，这里不做讨论。
推荐学习：《react视频教程》
以上就是react白屏原因是什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2922333.html
