react router BrowserRoute部署后页面空白问题
参考:https://www.cnblogs.com/sunLemon/p/9020153.html
遇到的问题
项目中控制路由跳转使用的是BrowserRouter,代码如下:
ReactDOM.render((<BrowserRouter><div className="container"><Route path={routePaths.INDEX} exact component={Index} /><Route path={routePaths.CARD} component={Card} /><Route path={routePaths.BASEINFO} component={BaseInfo} /><Route path={routePaths.EDUINFO} component={EduInfo} /><Route path={routePaths.FAMILYINFO} component={FamilyInfo} /><Route path={routePaths.OTHERINFO} component={OtherInfo} /><Route path={routePaths.DETAIL} component={Detail}/></div></BrowserRouter>),document.getElementById('app') );
在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的。 经过排查怀疑是路径的问题,将BrowserRouter 改为 HashRouter之后,问题解决了~
问题分析
首先分析下出现此问题的原因: 在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:
- hashHistory
- browserHistory
- createMemoryHistory
hashHistory 使用 URL 中的 hash(#)部分去创建路由,举例来说,用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/。
<HashRouter><div className="container"><Route path='/repos' component={Repos} /><Route path='/about' component={About} /></div></HashRouter>
上面代码中,用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。
browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL 。
在browserHistory 模式下,URL 是指向真实 URL 的资源路径,当通过真实 URL 访问网站的时候,由于路径是指向服务器的真实路径,但该路径下并没有相关资源,所以用户访问的资源不存在。
Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境(像 React Native )。和另外两种history的一点不同是你必须创建它,这种方式便于测试。
const history = createMemoryHistory(location)
解决办法
- 使用hashHistory
本地开发时,使用browserHistory是没有问题的,这是因为webpack.config.js中使用 webpack-dev-server 已经做了配置。
webpackConfig.devServer = {contentBase: path.resolve(__dirname, 'build'),compress: true, //gzip压缩historyApiFallback: true,};
- 如果要使用browserHistory的话,服务器需要进行相关路由配置,方法见 这里;
参考资料:
- https://www.sitepoint.com/react-router-v4-complete-guide/
- http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
- https://www.thinktxt.com/react/2017/02/26/react-router-browserHistory-refresh-404-solution.html
- http://echizen.github.io/tech/2016/07-05-webpack-dev-server-react-router-config
- https://jaketrent.com/post/pushstate-webpack-dev-server/
react router BrowserRoute部署后页面空白问题相关推荐
- vue项目打包部署后页面空白
创建vue.config.js文件,输入: module.exports = {publicPath: './' } 如果没生效,在vue-ui可视化界面中设置 路由设置为hash或默认模式,rout ...
- react部署之页面空白
react部署之页面空白 问题:create-react-app build打包后,页面出现空白. 可能一: 控制台报错,js等文件找不到(404) 文件路径问题,只需修改package.json文件 ...
- 同一个ip服务器comcat下部署第二个项目怎么设置,用nginx在同一服务器端口下部署多个项目,第二个项目打开后页面空白?...
1.问题概括: 按照这篇文章的做法,用nginx在在服务器同一端口下部署多个项目,结果发现,第一个项目正常运行,第二个项目打开后页面空白. 2.服务器上项目文件夹的结构: /home 路径下有两个如下 ...
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
- 添加ejs后页面空白解决办法
项目场景: <ul><%for(var i=0;i<list.length;i++){%><li><%=list[i].title%></l ...
- Vue项目打包部署后首页空白的问题
问题描述 在进行项目开发的时候,用Vue进行项目框架的搭建并开发,开发完成时需要部署到客户现场,通过命令 npm run build 将项目打包,然后上传至服务器的tomcat目录下,然后通过地址访问 ...
- Apache反向代理访问code-server登陆账户后页面空白该怎么办?
问题复现 添加反向代理:直接在宝塔面板的网站设置中添加反向代理,如图所示 这样操做会产生 Websocket 报错1006,导致登陆进去显示一片空白页面. 主要原因apache的反向代理需要手动添加W ...
- react项目打包后路径找不到,项目打开后页面空白的问题
使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage 转载于:https:/ ...
- vue 打包后页面空白问题
1.可能是打包的路径有问题 你可以打开打包后的index.html检查一下css,js的路径是否正确: 路径不正确,你就需要在vue.config.js中修改这个属性:(vue.config.js不知 ...
- vue ie11打包后页面空白
vue打包后不兼容ie Promise问题 Promise问题 ie是个神奇的浏览器不兼容es6,也就不兼容promise.解决方法 npm install --save babel-polyfill ...
最新文章
- 0.3秒定位解剖位置、定位精度提升超2.3%!
- mysql coreseek_centos+php+coreseek+sphinx+mysql之一coreseek安装篇
- mysql 分表索引_mysql中,分表查询和索引查询哪个更快?
- min_25 推导及例题总结
- 前端学习(1558):ng-repeat命令
- 笔记72 高级SSM整合
- 神器 Wineskin 基础教程
- 粒子群优化算法(PSO)
- mvc新增,上架及下架
- Effective java读后感
- 基于centos7.8的K8安装
- SQP21-19-10-1CC-18高压定量叶片泵
- python如何编写温度转换_Python温度转换实例分析
- 2020 年第一届辽宁省大学生程序设计竞赛
- 向Oracle表中的添加数据
- U盘文件突然不见却占内存 解决方案
- 第1章关键角色及其职责——明确职责
- Jetpack - Paging
- 华为月薪11万招工程师,看到要求我傻眼了!
- 计算机英语中poke什么意思,poke是什么意思_poke在线翻译_英语_读音_用法_例句_海词词典...