[react-router] hashHistory 和 browserHistory 的区别

react-router提供了三种方式来实现路由，并无默认的路由，须要在声明路由的时候，显式指定所使用的路由。

//v1.x
<Router/>
//v2.0.0 // hash history import { hashHistory } from 'react-router' <Router history={hashHistory} />

• browserHistory
• hashHistory
• createMemoryHistory

官方推荐使用browserHistory

使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis

使用browserHistory,浏览器的url是这样的：/user/liuna

这样看起来固然是browerHistory更好一些，可是它须要server端支持。

使用hashHistory时，由于有 # 的存在，浏览器不会发送request,react-router 本身根据 url 去 render 相应的模块。

使用browserHistory时，从 / 到 /user/liuna, 浏览器会向server发送request，因此server要作特殊请求，好比用的 express 的话，你须要 handle 全部的路由 app.get('*', (req, res) => { ... })，使用了 nginx 的话，nginx也要作相应的配置。

 

若是只是静态页面，就不须要用browserHistory,直接hashHistory就行了。

react router为何推荐使用browserHistory而不推荐hashHistory？

首先 browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是经过改变地址后面的 hash 来改变浏览器的历史记录；

History API 提供了 pushState() 和 replaceState() 方法来增长或替换历史记录。而 hash 没有相应的方法，因此并无替换历史记录的功能。但 react-router 经过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。

另外一个缘由是 hash 部分并不会被浏览器发送到服务端，也就是说无论是请求 http://domain.com/index.html#foo 仍是 http://domain.com/index.html#bar ，服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 须要服务端支持，这样服务端能获取请求细节。

还有一个缘由是由于有些应该会忽略 URL 中的 hash 部分，记得以前将 URL 使用微信分享时会丢失 hash 部分。