react白屏如何解决

本篇内容主要讲解“react白屏如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react白屏如何解决”吧!

创新互联公司是一家专注于成都网站建设、成都做网站与策划设计,巴州网站建设哪家好?创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:巴州等地区。巴州做网站价格咨询:028-86922220

react白屏的原因是HtmlWebpackPlugin插件在引入bundle.js时,引入的是相对路径,其解决办法:1、在output配置中加入publicPath;2、在history模式下,将historyApiFallback设置为true即可。

react history模式下的白屏问题

近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案。

原因

首先,我们说一下造成这一系列现象的原因。

我们在http://localhost:xxxx/这个路径下去刷新页面是没有问题的,一切都显得那么正常,但是当我们换到一个子模块,刷新就会白屏,为什么呢?

react白屏如何解决

我们看到,它会从当前路径下去找bundle.js,为什么?因为HtmlWebpackPlugin插件在帮我们引入bundle.js时,引入的是相对路径

react白屏如何解决

所以,在刷新时,它是相对于现在的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模式就能正常使用了。

到此,相信大家对“react白屏如何解决”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网站栏目:react白屏如何解决
地址分享:http://pwwzsj.com/article/jpejhd.html