最近看了react-router 源碼，對react-router有了更深的理解，下面寫點東西備忘：
react-router-dom 是對react-router 的擴展，而兩者實現(xiàn)路由跳轉(zhuǎn)的本質(zhì)依賴于一個history 插件。
此history 插件 是對瀏覽器原生 history 的封裝。

BrowserHistory

1.push

 function push(path, state) {
...
 globalHistory.pushState({
          key: key,
          state: state
        }, null, href);
...
}

2.replace

function replace(path, state) {
...
 globalHistory.replaceState({
          key: key,
          state: state
        }, null, href);
...
}

3.Listeners

var PopStateEvent = 'popstate';
var HashChangeEvent = 'hashchange';
function checkDOMListeners(delta) {
    listenerCount += delta;

    if (listenerCount === 1 && delta === 1) {
      window.addEventListener(PopStateEvent, handlePopState);
      if (needsHashChangeListener) window.addEventListener(HashChangeEvent, handleHashChange);
    } else if (listenerCount === 0) {
      window.removeEventListener(PopStateEvent, handlePopState);
      if (needsHashChangeListener) window.removeEventListener(HashChangeEvent, handleHashChange);
    }
  }

總結(jié) ：history router 基于 html5 新增的 history API，pushState， replaceState，其用法如下：
history.pushState(state, title, url);
history.replaceState(state, title, url);
即：跳轉(zhuǎn)到 url 路徑（與當(dāng)前頁面處在同一個域 ,形如一個網(wǎng)站的
location.pathname 部分），指定新頁面的標(biāo)題 title，但是瀏覽器目前都忽略這個值，因此這里一般使用 null，state 為關(guān)聯(lián)新地址的狀態(tài)對象（刷新頁面并不會丟失）。二者的區(qū)別就是，pushState 會增加一條瀏覽器記錄，而replaceState 會替換當(dāng)前歷史記錄。相同點是，均不會刷新當(dāng)前頁面，也不會發(fā)生真正的跳轉(zhuǎn)，而是僅僅改變了地址欄的 URL（history、location 對象）。
同時 history router 通過 popstate 來監(jiān)聽變化。

hash router

1.push

function pushHashPath(path) {
  window.location.hash = path;
}

2. replace

function replaceHashPath(path) {
  window.location.replace(stripHash(window.location.href) + '#' + path);
}

3. Listeners

var HashChangeEvent$1 = 'hashchange';
function checkDOMListeners(delta) {
    listenerCount += delta;

    if (listenerCount === 1 && delta === 1) {
      window.addEventListener(HashChangeEvent$1, handleHashChange);
    } else if (listenerCount === 0) {
      window.removeEventListener(HashChangeEvent$1, handleHashChange);
    }
  }

總結(jié)： hash router 基于 location.hash = pathString 來更新網(wǎng)站路徑。pathString 代表網(wǎng)址中 # 號后面直到 search 的部分。與 history 不同的是，如果兩次賦值一樣的時候，并不會觸發(fā) hashchange 和 popstate 方法。同時瀏覽器通過 hashchange 事件來監(jiān)聽路由變化。

MemoryHistory

在非瀏覽器環(huán)境，使用抽象路由實現(xiàn)導(dǎo)航的記錄功能MemoryHistory，即在內(nèi)存中保存的一個創(chuàng)建的虛擬路由對象。

getUserConfirmation

getUserConfirmation 約等于 vue-router 中路由守衛(wèi)，它是在路由跳轉(zhuǎn)時的鉤子函數(shù)，當(dāng)傳入它時可以在getUserConfirmation 內(nèi)控制時都進(jìn)行路由跳轉(zhuǎn)。
getUserConfirmation 的用法如下

<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

即 當(dāng)callback(true) 會跳轉(zhuǎn)，callback(false) 不會跳轉(zhuǎn)，那么我們看一下 在觸發(fā)路由跳轉(zhuǎn)時 做了什么操作

 function confirmTransitionTo(location, action, getUserConfirmation, callback) {
    // TODO: If another transition starts while we're still confirming
    // the previous one, we may end up in a weird state. Figure out the
    // best way to handle this.
    if (prompt != null) {
      var result = typeof prompt === 'function' ? prompt(location, action) : prompt;

      if (typeof result === 'string') {
        if (typeof getUserConfirmation === 'function') {
          getUserConfirmation(result, callback);     // 重點在這里
        } else {
          warning(false, 'A history needs a getUserConfirmation function in order to use a prompt message');
          callback(true);
        }
      } else {
        // Return false from a transition hook to cancel the transition.
        callback(result !== false);
      }
    } else {
      callback(true);
    }
  }

在進(jìn)行跳轉(zhuǎn)時會調(diào)用getUserConfirmation 傳入result, callback
callback 什么函數(shù)呢？ 以createBrowserHistory push 中的為例：

 function push(path, state) {
    warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored');
    var action = 'PUSH';
    var location = createLocation(path, state, createKey(), history.location);
    transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
      if (!ok) return;  // 傳入非 true 則不進(jìn)行任何操作
      var href = createHref(location);
      var key = location.key,
          state = location.state;

      if (canUseHistory) {
        globalHistory.pushState({
          key: key,
          state: state
        }, null, href);

        if (forceRefresh) {
          window.location.href = href;
        } else {
          var prevIndex = allKeys.indexOf(history.location.key);
          var nextKeys = allKeys.slice(0, prevIndex + 1);
          nextKeys.push(location.key);
          allKeys = nextKeys;
          setState({
            action: action,
            location: location
          });
        }
      } else {
        warning(state === undefined, 'Browser history cannot push state in browsers that do not support HTML5 history');
        window.location.href = href;
      }
    });
  }

可見 callback 中只有傳入true 才可以執(zhí)行下一步，由此我們可以通過 getUserConfirmation 實現(xiàn)路由攔截。