react-router3中browserHistory与hashHistory

React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

React Router 是建立在history之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为location对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。

• browserHistory
• hashHistory
• createMemoryHistory

browserHistory

Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的HistoryAPI 用于处理 URL，创建一个像example.com/some/path这样真实的 URL。browserHistory模式路由需要服务端做好配合，应用启动最初的/这样的请求应该没问题，但当用户来回跳转也是没有问题得，但在例如路由/accounts/123刷新时，服务器就会收到来自/accounts/123的请求，这时你需要处理这个 URL 并在响应中包含 JavaScript 应用代码。

这里，列举一个简单的例子说明，使用express建立一个服务端应用程序：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 80
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response) {
  response.sendFile(path.resolve(__dirname, 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

当不开启后端服务时，刷新/About路由看看：

注意：使用webpack-dev-server启动前端服务时不要配置 --history-api-fallback，不然找不到/About时会跳转到默认页面index.html，就看不到上面现象。

当开启后端服务并刷新/About路由：

当刷新任何一个路由时，都返回了index.html，然后script加载的build.js（webpack出口文件，里面配置有路由）就自动进行路由匹配，展示该显示的组件页面。如果想要根据URL直接返回路由匹配的组件页面就需要用到服务端渲染了。

window对象提供的history对象可以使我们操作浏览器的会话历史栈，常用有有以下API：

window.history.back();// 在history中向后跳转
window.history.forward();// 在history中向前跳转
window.history.go();// 用 `go()` 方法载入到会话历史中的某一特定页面
window.history.pushState(state, title, url);// 在history中添加记录
window.history.replaceState();// 在history中替换（修改）记录

浏览器还提供一个popstate事件，用于监听URL的变化。

window.addEventListener('popstate', callback)

browserHistory模式路由就是基于上面API来实现的。

hashHistory

Hash history 使用 URL 中的 hash（#）部分去创建形如www.example.com/#/some/path的路由。Hash history 不需要服务器任何配置就可以运行。浏览器的每次刷新只发送http://www.example.com/请求，然后基于#后面的hash匹配路由。

if (window.location.hash === '#/') {
    window.location.href = window.location.origin + '/admin/' + window.location.hash;
  }

如果以上面方式更改URL，那么每次刷新页面时发起请求变更为http://www.example.com/admin/，路由还是基于#候面的hash。

浏览器提供hashchange来监听hash值得变化，从而匹配相应的路由

window.location.hash='xxx' // 改变hash
window.addEventListener('hashchange', callback) // 监听hash的改变