hashHistory和browserHistory的区别

一、简述

HashHistory和BrowserHistory都是history库中定义的类，可以通过history库中的createHashHistory和createBrowserHistory方法分别创建hashHistory和browserHistory对象，且都是单例对象。这两者都是通过对window.history对象和window.location对象的封装，衍生出更多丰富的功能，使我们能更好的操作浏览器的历史记录，比如使用history库可以实现阻止跳转，以及定义跳转提示。
值得一提的是，history库中还有个createMemoryHistory方法可以用来创建memoryHistory对象，memoryHistory不依赖于浏览器环境，所有的历史记录都保存在内存中。

二、两者的区别

1. 使用hashHistory对象时，路由地址都放在URL的hash值中，hash值都以“#”开头，而使用browserHistory对象时，路由地址都在URL的path中。

2. browserHistory存在浏览器兼容问题。browserHistory使用了window.history对象中的pushState和replaceState方法，这两个方法是HTML5中新增的history API， 不是所有浏览器都支持。

3. browserHistory需要服务端的支持。当某个子页面重新刷新或者别人通过复制子页面的路由地址重新访问时，这时会发请求给服务端，传给服务端的请求地址是子页面对应的路由地址，服务端也要能做相应的解析，将前端页面返回。hashHistory由于将路由地址都放在hash值中，而URL中的hash值在请求服务端时会被忽略，所以服务端只需要处理首页的请求地址即可，不需要做其他处理。

4. hashHistory不能设置强制更新模式。hashHistory的路由地址都放在hash值中，而通过window.position.hash修改hash值时不会触发浏览器刷新页面，所以hashHistory不能设置强制更新模式，而browserHistory可以。

5. hashHistory可以设置哈希模式hashType。hashType有三个枚举值，分别是“slash”、“noslash”和“hashbang”，默认为“slash”，是。当值为“slash”时，其hash符号“#”后都将跟上“/”；当值为“noslash”时，则“#”后没有“/”；当值为“hashbang”时，则“#”会接上“!”与“/”，这样可以让搜索引擎在抓取URL时，会对URL中的hash进行抓取，从而获得更全面的信息。

6. hashHistory仅能从hashHistory.location.state中读取到state值，而不能从window.history.state中读取到，第4版本的history库不建议在hashHistory中使用state，虽然可通过location对象传递state，但是其作为页面级别的state，不具备持久化state的能力，因为window.location对象没有保存state的方法。当浏览器执行后退再前进到该页面时，读取hashHistory.location.state的值将为空，而browserHistory可以再次读取到state值。

更多个人文章

1. 两个跨域页面进行跳转传参的终极方案
2. 彻底搞懂盒子模型
3. 深入理解Event Loop的运行机制
4. 面试秘籍之手写系列
5. 面试秘籍之排序算法