近期,再用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 history模式下的白屏问题的更多相关文章

  1. IDLE的GUI交互模式下完美清屏

    IDLE的GUI交互模式下完美清屏==============================================================================1.首先把 ...

  2. 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

    一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...

  3. `vue-router`的`History`模式下的项目发布

    背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...

  4. react native 完美解决启动白屏

    先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...

  5. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  6. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  7. 微信小程序iOS下拉白屏晃动,坑坑坑

    感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...

  8. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  9. React Native 首次加载白屏优化

    RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...

随机推荐

  1. 标准输入输出 stdio 流缓冲 buffering in standard streams

    From : http://www.pixelbeat.org/programming/stdio_buffering/ 译者:李秋豪 我发现找出标准流用的是什么缓冲是一件困难的事. 例如下面这个使用 ...

  2. Drupal相关网站推荐

    http://nodeone.se/ drupal7安装过程中,如果选择简体中文,到导入翻译时出现错误,原因是执行超时了. 方法一: 修改php.ini文件:memory_limit = 256M ( ...

  3. C#的接口基础教程之七 覆盖虚接口

    有时候我们需要表达一种抽象的东西,它是一些东西的概括,但我们又不能真正的看到它成为一个实体在我们眼前出现,为此面向对象的编程语言便有了抽象类的概念.C#作为一个面向对象的语言,必然也会引入抽象类这一概 ...

  4. oc字典放入到数组里,根据字典里的属性排序(重点)

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  5. EventUtil处理js兼容性问题

    var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ elem ...

  6. web开发框架Flask学习二

    jinja2模板规范 在当前项目中创建一个文件为templates的文件夹,将其设置为模板文件夹,新建的html为模板页面, 在视图函数中使用render_template(".html的文 ...

  7. Codeforces Round #460 (Div. 2)-D. Substring

    D. Substring time limit per test3 seconds memory limit per test256 megabytes Problem Description You ...

  8. [BZOJ1208]宠物收养所(Splay)

    Description 最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物.每个领养者都希望领养到自己满意的宠物,阿Q根据领养者的要求通过他自己发明的一个特 ...

  9. EasyUI与Bootstrap完美结合

    注意点:版本问题.两者都是基于jQuery来构建,所以对于版本的选择要注意下

  10. Hive将SQL转化为MapReduce的过程

    Hive将SQL转化为MapReduce的过程: Antlr定义SQL的语法规则,完成SQL词法,语法解析,将SQL转化为抽象语法树AST Tree 遍历AST Tree,抽象出查询的基本组成单元Qu ...