react部署之页面空白

问题:create-react-app build打包后,页面出现空白。

可能一:

控制台报错,js等文件找不到(404)

文件路径问题,只需修改package.json文件,添加

"homepage":".",

位置:

可能二:

如果添加后没有报错,但还是页面空白。可尝试将文件部署在服务器根目录上,如果根目录可以打开,即可能是服务代理问题

检查BrowserRouter的basename属性

<BrowserRouter basename='/myDemos/build/'>
<Switch>
<Route path="/" component={HomeRoute}/>
</Switch>
</BrowserRouter>

该属性设置静态部署路径,如上代码中build文件夹下放置打包好的文件

本项目使用BrowserRouter,如使用hashrouter请自行百度

钻研不易,转载请注明出处...

react部署之页面空白的更多相关文章

  1. vue 项目build后部署上去页面空白

    默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...

  2. Flex 页面空白或Error #2032

    日前用flex.arcgis做了一个地图显示的页面,本机调试没题目,公布后放到用户办事器上(win2003,ie6)ie6显示页面空白,换搜狗浏览器显示Error #2032,只显示进度条,客户端用i ...

  3. Prestashop 页面空白

    Advanced Parameters > Performance页面空白,无任何提示错误,解决方法: 更改文件/cache/class_index.php 权限为666

  4. IE下必须点击一下页面空白的地方才可以激活onchange事件

    checkbox在IE下必须点击一下页面空白的地方才可以激活onchange事件. 解决办法把onchange换成onclick

  5. jupyter-notebook后home页面空白问题

    jupyter-notebook后home页面空白问题 解决方案1   更换默认的浏览器,选择谷歌浏览器,很多360打不开的页面,更换谷歌后都能有效解决,并且确保是最新版本的google浏览器. 解决 ...

  6. 在CentOS 上搭建nginx来部署静态页面网站

    在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...

  7. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  8. ionic在ios侧滑页面空白 禁用视图滑动后退

    本人在ios10左右滑动的时候,经常出现左滑页面后退,然后整个页面空白现象,只能强行退出,并重新登录,最简单的方法就是禁用侧滑后退这个功能: 在app.js上config增加如下: $ionicCon ...

  9. Struts1 不能进入Action,页面空白问题解决

    http://blog.csdn.net/barry_liao/article/details/35592935 Struts1 不能进入Action,页面空白问题解决 标签: Struts1Acti ...

随机推荐

  1. python functools.partial

    functools.partial 用一些默认参数包装一个可调用对象,返回结果是可调用对象,并且可以像原始对象一样对待 冻结部分函数位置函数或关键字参数,简化函数,更少更灵活的函数参数调用 refer ...

  2. Linux修改开机启动logo

    默认开机LOGO会在液晶屏的左上脚显示一只小企鹅,分辨率为80*80,具体在kernel/drivers/video/logo下会有logo_linux_clut224.ppm这幅图像,程序会根据这幅 ...

  3. smarty学习——内建函数(部分接上)

    9.{foreach} {foreachelse} 格式如下: {foreach $arrayvar as $itemvar} {foreach $arrayvar as $keyvar=>$i ...

  4. android 发送UDP广播,搜寻server建立socket链接

    应用场景:client(手机.pc)须要搜寻所在局域网内的server并获得server地址. 方法简单介绍:client发送UDP广播,服务收到广播后得到clientip地址,然后向client发送 ...

  5. dup and dup2的剖析

    转:http://www.cnblogs.com/sdphome/archive/2011/04/30/2033381.html dup和dup2都可用来复制一个现存的文件描写叙述符,使两个文件描写叙 ...

  6. react 知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  7. JZ2440 裸机驱动 第8章 NAND Flash控制器

    本章目标  了解NAND Flash 芯片的接口 掌握通过NAND Flash控制器访问NAND Flash的方法 8.1 NAND Flash介绍和NAND Flash控制器使用     NAND ...

  8. 利用springMVC包装类上传多个文件

    前端JSP页面代码片段: <!-- springMVC包装类上传文件 --><form name="uploadFiles" id="uploadFil ...

  9. 关于java泛型的使用方式。。。。

    转自:http://onewebsql.com/blog/generics-extends-super 以下基本够用了 Today we continue our mini-series on Jav ...

  10. 【pushlet学习】具体实战

    业务需求: 1. 前端界面需要实时显示空调.照明等设备的状态, 如:空调电压.空调电流.光照强度等,这些量每一个称作一个测点: 2. 不同的用户登录系统后,用户只能看到自己设备的运行状态,而看不到其他 ...