react-router v4中 HashRouter 和 BrowserRouter的使用
遇到的问题
项目中控制路由跳转使用的是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 v4中 HashRouter 和 BrowserRouter的使用的更多相关文章
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- [React Router v4] Render Catch-All Routes with the Switch Component
There are many cases where we will need a catch-all route in our web applications. This can include ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
- [React Router v4] Redirect to Another Page
Overriding a browser's current location without breaking the back button or causing an infinite redi ...
- [React Router v4] Render Nested Routes
With React Router v4 the entire library is built as a series of React components. That means that cr ...
- [React Router v4] Parse Query Parameters
React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...
随机推荐
- 监控zookeeper
[4ajr@db1 scripts]$ cat zookeeper_mode.sh #!/bin/bash mode=`echo srvr|nc 127.0.0.1 2181|awk '/Mode/{ ...
- Set.js--创建无重复值的无序集合
Set 集合,不同于 Array,是一种没有重复值的集合. 以下代码出自于<JavaScript 权威指南(第六版)>P217,注意:这里并不是指 es6 / es2015 中的 Set ...
- ASP.NET Core使用HttpClient的同步和异步请求
using System; using System.Collections.Generic; using System.Collections.Specialized; using System.I ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
- 一个.net的程序员如何转到java的?
先说明,大佬请忽略我这篇文章, 我是一个做了5年的纯种C#开发人, 我在此仅记录一下我转java的过程.都知道, java是开源的,所以它的开发工具贼多,不像.net, 直接地表最强的IDE. 像现 ...
- RBAC权限管理模型 产品经理 设计
RBAC权限管理模型:基本模型及角色模型解析及举例 | 人人都是产品经理http://www.woshipm.com/pd/440765.html RBAC权限管理 - PainsOnline的专栏 ...
- css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
- springboot aop 自定义注解
枚举类: /** * Created by tzq on 2018/5/21. */ public enum MyAnnoEnum { SELECT("select"," ...
- Platform.Uno介绍
编者语:Xamarin国内很多人说缺乏可用的实例,我在写书过程中在完善一些常用场景的例子,希望帮到大家.Build 2018结束一周了,善友问我要不要谈谈Xamarin的一些变化,但碍于时间有限一直没 ...
- python之常用模块一(time、random、os、sys)
摘要:时间模块time .随机模块random .os模块.sys模块 一.时间模块 三种格式 时间戳时间:浮点数 单位为秒 时间戳起始时间: 1970.1.1 0:0:0 英国伦敦时间 1970.1 ...