react-router的原理

底层是通过history来实现的（go, back, goforward），html5的History对其进行一层包装，暴露了一些API给我们。

replaceState()和pushState()区别：pushState()是把浏览器的会话压入栈中，会使得History.length加1，而replaceState是替换当前的这条会话历史，因此不会增加History.length。
配合window.onpopstate来使用：每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的，或者是由 replaceState 改变的，那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

react-router在history库的基础上，控制不同的url渲染不同的组件，实现了URL与UI的同步。
react-router 本质上，利用了 history api 的 pushState, replaceState 方法来控制路由地址，然后使用 popstate, hashchange 事件来监听变化，从而做出相应的视图变化。

function createHistory(options={}) {
  ...
  return {
    listenBefore, // 内部的hook机制，可以在location发生变化前执行某些行为，AOP的实现
    listen, // location发生改变时触发回调
    transitionTo, // 执行location的改变
    push, // 改变location
    replace,
    go,
    goBack,
    goForward,
    createKey, // 创建location的key，用于唯一标示该location，是随机生成的
    createPath,
    createHref,
    createLocation, // 创建location
  }
}