react-routerの原理

下層はhistoryによって実現され(go,back,goforward),html 5のHistoryはそれを包装し,いくつかのAPIを暴露してくれた.
replaceState()とpushState()の違い:pushState()はブラウザのセッションをスタックに押し込むことでHistory.lengthは1を追加し、replaceStateは現在のセッション履歴を置き換えるのでHistoryは増加しません.length. Windowsに合わせる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
  }
}