react-router 路由的實現原理

React Router 是一個基於 React 之上的強大路由庫，它能夠讓你嚮應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。本文從兩個方便來解析 react-router 實現原理。一：介紹 react-router 的依賴庫history；二：使用 history 庫，實現一個簡單的 react-router 路由。

history 介紹

history 是一個 JavaScript 庫，可以讓您在 JavaScript 運行的任何地方輕鬆管理會話歷史記錄。history 抽象出各類環境中的差別，並提供最小的 API ，使您能夠管理歷史堆棧，導航，確認導航以及在會話之間保持狀態。

history 有三種實現方式：
一、BrowserHistory：用於支持 HTML5 歷史記錄 API 的現代 Web 瀏覽器（請參閱跨瀏覽器兼容性）
二、HashHistory：用於舊版Web瀏覽器
三、MemoryHistory：用做參考實現，也可用於非 DOM 環境，如 React Native 或測試

三種實現方法，都是建立了一個 history 對象，這裏主要講下前面兩種：

const history = {
    length: globalHistory.length, 
    action: "POP", 
    location: initialLocation,
    createHref,
    push, // 改變location
    replace,
    go,
    goBack,
    goForward,
    block,
    listen //監聽路由變化
};

1.頁面跳轉實現

BrowserHistory：pushState、replaceState;
HashHistory：location.hash、location.replace

function push(){
  createKey(); // 建立location的key，用於惟一標示該location，是隨機生成的
  if(BrowserHistory){
    globalHistory.pushState({ key, state }, null, href);
  }else if(HashHistory){
    window.location.hash = path;
  }
  //上報listener 更新state ...
}
function replace(){
  createKey(); // 建立location的key，用於惟一標示該location，是隨機生成的
  if(BrowserHistory){
    globalHistory.replaceState({ key, state }, null, href); 
  }else if(HashHistory){
    window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
  } 
  //上報listener 更新state ...  
}

2.瀏覽器回退

BrowserHistory：popstate;
HashHistory：hashchang;

if(BrowserHistory){
  window.addEventListener("popstate", routerChange);
}else if(HashHistory){
  window.addEventListener("hashchange", routerChange);
}
function routerChange(){
  const location = getDOMLocation(); //獲取location
  //路由切換
  transitionManager.confirmTransitionTo(location,callback=()=>{
    //上報listener
    transitionManager.notifyListeners();
  });
}

經過 history 實現簡單 react-router

import { Component } from 'react';
import createHistory from 'history/createHashHistory';
const history = createHistory(); //建立 history 對象
/**
 * 配置路由表
 * @type {{"/": string}}
 */
const router = {
  '/': 'page/home/index',
  '/my': 'page/my/index'
}
export default class Router extends Component {
  state = { page: null }

  async route(location) {
    let pathname = location.pathname;
    let pagePath = router[pathname];
    // 加 ./的緣由 https://webpack.docschina.org/api/module-methods#import-
    const Page = await import(`./${pagePath}`); //獲取路由對應的ui
    //設置ui
    this.setState({ 
      Page: Page.default 
    });
  }

  initListener(){
    //監聽路由切換
    history.listen((location, action) => {
      //切換路由後，更新ui
      this.route(location);
    });
  }

  componentDidMount() {
    this.route(history.location);
    this.initListener();
  }

  render() {
    const { Page } = this.state;
    return Page && <Page {...this.props} />;
  }
}