源碼學習之: 手寫react-router和react-router-dom

書寫代碼之前, 需要先梳理一下router和router-dom的相關(guān)內(nèi)容.

路由信息

Router組件會創(chuàng)建一個上下文, 并且向上下文中注入一些信息

該上下文對開發(fā)者是隱藏的, Router組件若匹配到了地址, 則會將這些上下文信息作為屬性傳入對應(yīng)的組件.
傳入組件的屬性包括: history, location, match三個對象.

history

它并不是window.history對象, 我們利用該對象無刷新跳轉(zhuǎn)地址.

為什么沒有直接使用window.history對象

  1. React-Router中有兩種模式: hash, history. 如果直接使用window.history, 只能支持一種模式
  2. 當使用window.history.pushState方法時, 沒有辦法收到任何通知, 將導致react無法知曉地址發(fā)生了變化, 結(jié)果導致無法重新渲染組件

history中擁有的方法和屬性(在下文中列出)

location

與上面history.location完全一致, 是同一個對象, 但是與window.location不同.

location對象中記錄了當前地址相關(guān)的信息

我們通常使用第三方庫query-string解析地址欄中的數(shù)據(jù)

location對象包含的屬性:

  • pathname: 路徑(域名端口之后, 查詢參數(shù)和哈希之前的那部分)
  • search: 查詢參數(shù)部分(如: ?a=1&b=2)
  • hash: 哈希部分(如: #aaa=23)
  • state: 狀態(tài)數(shù)據(jù)

match

該對象中, 保存了路由匹配的相關(guān)信息

事實上, Route組件中的path, 配置的是string-pattern(字符串正則)

react-router使用了第三方庫: Path-to-RegExp, 該庫的作用是將一個字符串正則轉(zhuǎn)換成一個真正的正則表達式

match對象包含的屬性:

  • isExact: 事實上, 當前的路徑和路由配置的路徑是否是完全匹配的
  • params: 獲取路徑規(guī)則中對應(yīng)的數(shù)據(jù)
  • path: Route組件所配置的path規(guī)則
  • url: 真實url匹配到規(guī)則的那一部分

非路由組件獲取路由信息

某些組件, 并沒有直接放到Route中, 而是嵌套在其他普通組件中, 因此它的props中沒有路由信息, 如果這些組件需要獲取路由信息, 可以使用下面兩種方式:

  1. 將路由信息從父組件一層一層傳遞到子組件
  2. 使用react-router提供的高階組件withRouter, 包裝要使用的組件, 該高階組件返回的組件將含有注入的路由信息

正式開始核心邏輯編寫

第一步

通過使用第三方庫path-to-regexp, 編寫一個函數(shù), 該函數(shù)的作用就是根據(jù)匹配情況, 創(chuàng)建一個match對象

// matchPath.js 文件

import pathToRegexp from 'path-to-regexp';

/**
 * 得到的匹配結(jié)果, 匹配結(jié)果是一個對象, 如果不能匹配, 返回null
 * 總而言之, 返回的結(jié)果是react-route中的match對象. 
 * {
 *      isExact: xx,
 *      params: {},
 *      path: xx,
 *      url: xx,
 * }
 * 例如: 要匹配路徑 /news/:id/:page?xxx=xxx&xxx=xxx#xxx=xxx
 * @param {*} path 路徑規(guī)則
 * @param {*} pathname 具體的地址
 * @param {*} options 相關(guān)配置, 該配置是一個對象, 該對象中可以出現(xiàn): exact, sensitive, strict
 */
export default function pathMatch(path, pathname, options) {
    // 保存路徑規(guī)則中的關(guān)鍵字
    const keys = [];
    const regExp = pathToRegexp(path, keys, getOptions(options));
    const result = regExp.exec(pathname);
    // 如果沒有匹配上, result是null
    if (!result) {
        return null;
    }
    // 匹配了
    // 匹配后正則結(jié)果result數(shù)組有3項, 第一項是整個匹配的內(nèi)容, 第2,3項分別對應(yīng)兩個分組
    // pathToRegexp函數(shù)會把路徑正則內(nèi)的變量保存到keys數(shù)組中, 與2, 3項的分組結(jié)果對應(yīng)
    // 通過這兩個數(shù)組, 來組合成一個params對象
    let groups = Array.from(result);
    groups = groups.slice(1);
    const params = getParams(groups, keys);

    return {
        params,
        path,
        url: result[0],
        isExact: pathname === result[0]
    }
}

/**
 * 將傳入的react-router配置, 轉(zhuǎn)換為path-to-regexp配置
 * @param {*} options 
 */
function getOptions(options) {
    const defaultOptions = {
        exact: false,
        sensitive: false,
        strict: false,
    };
    const opts = { ...defaultOptions, ...options };
    return {
        sensitive: opts.sensitive,
        strict: opts.strict,
        end: opts.exact,
    }
}

/**
 * 根據(jù)分組結(jié)果, 得到params對象. 此對象即match對象中的params
 * @param {*} groups 分組結(jié)果
 * @param {*} keys 
 */
function getParams(groups, keys) {
    const obj = {};
    for (let i = 0; i < groups.length; i++) {
        const value = groups[i];
        const name = keys[i];
        obj[name] = value;
    }
    return obj;
}

第二步

編寫history對象. 該對象提供了一些方法, 用于控制或監(jiān)聽地址的變化.
該對象不是window.history, 而是一個抽離的對象, 它提供了統(tǒng)一的API, 封裝了具體的實現(xiàn).

  • createBrowserHistory 產(chǎn)生的控制瀏覽器真實地址的history對象
  • createHashHistory 產(chǎn)生的控制瀏覽器hash的history對象
  • createMemoryHistory 產(chǎn)生的控制內(nèi)存數(shù)組的history對象

共同特點, 它維護了一個地址棧

react-router中, 使用了第三方庫實現(xiàn)history對象, 第三方庫就叫history
第三方庫就提供了以上的三個方法, 這三個方法雖然名稱和參數(shù)不同, 但返回的對象結(jié)構(gòu)(history)完全一致

createBrowserHistory的配置參數(shù)對象

  • basename: 設(shè)置根路徑
  • forceRefresh: 地址改變時是否強制刷新頁面
  • keyLength: location對象使用的key值長度
    • 地址棧中記錄的并非字符串, 而是一個location對象, 使用key值來區(qū)分對象
  • getUserConfirmation: 一個函數(shù), 該函數(shù)當調(diào)用history對象block函數(shù)后, 發(fā)生頁面跳轉(zhuǎn)時運行

history對象的方法和屬性

  • action: 當前地址棧, 最后一次操作的類型
    • 如果是通過createXXXHsitory函數(shù)新創(chuàng)建的history對象, action固定為POP
    • 如果調(diào)用了history的push方法, action變?yōu)镻USH
    • 如果調(diào)用了history的replace方法, action變?yōu)镽EPLACE
  • push: 向當前地址棧指針位置, 入棧一個地址
  • go: 控制當前地址棧指針偏移, 如果是0, 地址不變; 如果是負數(shù), 則后退指定的步數(shù), 如果是正數(shù)則前進指定的步數(shù)
  • length: 當前棧中的地址數(shù)量
  • goForward: 相當于go(1)
  • goBack: 相當于go(-1)
  • location: 表達當前地址中的信息
  • listen: 函數(shù), 用于監(jiān)聽地址棧指針的變化
    • 該函數(shù)接收一個函數(shù)作為參數(shù), 該參數(shù)表示地址變化后要做的事情
      • 參數(shù)函數(shù)接收兩個參數(shù)
      • location: 記錄了新的地址
      • action: 進入新地址的方式
        • POP: 指針移動, 調(diào)用go, goBack, goForward, 用戶點擊瀏覽器后退按鈕
        • PUSH: 調(diào)用history.push
        • REPLACE: 調(diào)用history.replace
    • 該函數(shù)有一個返回值, 返回的是一個函數(shù), 用于取消監(jiān)聽
  • block: 用于設(shè)置一個阻塞, 當頁面發(fā)生跳轉(zhuǎn)時, 會將指定的消息傳遞到getUserConfirmation, 并調(diào)用該函數(shù)
    • 該函數(shù)接收一個字符串參數(shù), 表示提示消息, 也可以接收一個函數(shù)參數(shù), 函數(shù)參數(shù)返回字符串表示消息內(nèi)容
    • 該函數(shù)返回一個取消函數(shù), 調(diào)用取消函數(shù)接觸阻塞
  • createHref: 返回一個完整的路徑字符串, 值為basename+url
    • 該函數(shù)接收location對象為參數(shù). 相當于將basename配置和location內(nèi)的信息做拼接

createBrowserHistory方法的代碼

// createBrowserHistory.js文件

import ListenerManager from "./ListenerManager";
import BlockManager from "./BlockManager";

/**
 * 創(chuàng)建一個history api的history對象
 * @param {*} options 配置對象
 */
export default function createBrowserHistory(options = {}) {

    const {
        basename = '',
        forceRefresh = false,
        keyLength = 6,
        getUserConfirmation = (message, callback) => callback(window.confirm(message))
    } = options;

    const listenerManager = new ListenerManager();
    const blockManager = new BlockManager(getUserConfirmation);

    // window.history.go方法內(nèi)部可能綁定了this. 直接作為對象的go屬性返回以xxx.go的方式調(diào)用報錯"illegal invocation"
    function go(step) {
        window.history.go(step);
    }

    function goBack() {
        window.history.back();
    }

    function goForward() {
        window.history.forward();
    }

    /**
     * 向地址棧中加入一個新的地址
     * @param {*} path 新的地址, 可以是字符串, 也可以是對象
     * @param {*} state 附近的狀態(tài)數(shù)據(jù), 如果第一個參數(shù)是對象, 該參數(shù)無效
     */
    function push(path, state) {
        changePage(path, state, true);
    }

    function replace(path, state) {
        changePage(path, state, false);
    }

    /**
     * 抽離的可用于實現(xiàn)push和replace的方法
     * @param {*} path 
     * @param {*} state 
     * @param {*} ispush 
     */
    function changePage(path, state, ispush) {
        let action = "PUSH";
        if (!ispush) {
            action = "REPLACE";
        }
        const pathInfo = handlePathAndState(path, state, basename);

        // 得到如果要跳轉(zhuǎn)情況下的location
        const targetLocation = createLocationFromPath(pathInfo);

        // 得到新的location后, 要先觸發(fā)阻塞, 看阻塞的情況再決定要不要進行后面的監(jiān)聽, 更新history和跳轉(zhuǎn)等動作
        blockManager.triggerBlock(targetLocation, action, () => {
            // 如果強制刷新的話, 會導致window.history丟失state數(shù)據(jù)
            // 所以先加上狀態(tài), 再強制刷新
            if (ispush) {
                window.history.pushState({
                    key: createKey(keyLength),
                    state: pathInfo.state
                }, null, pathInfo.path);
            } else {
                window.history.replaceState({
                    key: createKey(keyLength),
                    state: pathInfo.state
                }, null, pathInfo.path);
            }

            // 觸發(fā)監(jiān)聽事件
            listenerManager.triggerListeners(targetLocation, action);

            // 更新action屬性
            history.action = action;

            // 更新location對象
            history.location = targetLocation;

            // 進行強制刷新
            if (forceRefresh) {
                window.location.href = pathInfo.path;
            }
        });
    }

    function addDomListener() {
        // popstate事件只能監(jiān)聽前進, 后退, 用戶對地址hash的改變.
        // 即只能監(jiān)聽用戶操作瀏覽器上的按鈕和地址欄
        // 無法監(jiān)聽到pushState和replaceState
        window.addEventListener('popstate', () => {
            const location = createLocation(basename);
            // 觸發(fā)阻塞, 此處已經(jīng)完成了跳轉(zhuǎn)(沒有辦法阻止跳轉(zhuǎn)), 只能影響history對象里的location更新
            blockManager.triggerBlock(location, "POP", () => {
                // 此處要先觸發(fā)監(jiān)聽函數(shù), 再更新history的location對象
                // 因為監(jiān)聽函數(shù)還可以拿到之前的location, 同時又可以得到傳入的新的location
                listenerManager.triggerListeners(location, "POP");
    
                // 更新location對象
                history.location = location;
            });
        });
    }

    addDomListener();

    /**
     * 添加一個監(jiān)聽器, 并返回一個可用于取消監(jiān)聽的函數(shù)
     * @param {*} listener 
     */
    function listen(listener) {
        return listenerManager.addListener(listener);
    }

    function block(prompt) {
        return blockManager.block(prompt);
    }

    function createHref(location) {
        const { pathname = '/', search = '', hash = '' } = location;
        if (search.charAt(0) === "?" && search.length === 1) {
            search = "";
        }
        if (hash.charAt(0) === "#" && hash.length === 1) {
            hash = "";
        }
        return basename + pathname + search + hash;
    }

    const history = {
        action: "POP",
        location: createLocation(basename),
        length: window.history.length,
        go,
        goBack,
        goForward,
        push,
        replace,
        listen,
        block,
        createHref,
    };;


    // 返回history對象
    return history;
}


/**
 * 創(chuàng)建一個location對象
 * location對象包含的屬性有:
 * {
 *      hash: xxx,
 *      search: xxx,
 *      pathname: xxx,
 *      state: {}
 * }
 */
function createLocation(basename = '') {
    // window.location對象中, hash search是可以直接拿到的
    // pathname中會直接包含有basename, 所以我們自己的location對象中要在pathname中剔除basename部分
    let pathname = window.location.pathname;
    const reg = new RegExp(`^${basename}`);
    pathname.replace(reg, '');

    const location = {
        hash: window.location.hash,
        search: window.location.search,
        pathname,
    };

    // 對state對象的處理
    // 1. 如果window.history.state沒有值, 則我們的state為undefined
    // 2. 如果window.history.state有值, 但值的類型不是對象, 我們的state就直接賦值. 如果是對象, 該對象有key屬性, location.key = key,
    // 且 state = historyState.state. 該對象沒有key值, state = historyState

    let state, historyState = window.history.state;
    if (historyState === null) {
        state = undefined;
    } else if (typeof historyState !== 'object') {
        state = historyState;
    } else {
        // 下面這么處理key和state的原因是:
        // 為了避免和其他第三方庫沖突, history這個庫的push等方法跳轉(zhuǎn)且攜帶state數(shù)據(jù)時
        // history庫實際上將數(shù)據(jù)放入了window.history.state -> {key: xxx, state: 數(shù)據(jù)}中. 即window.history.state.state才是數(shù)據(jù)內(nèi)容
        // 因此, 此處在還原的時候才會有這個邏輯
        if ('key' in historyState) {
            location.key = historyState.key;
            state = historyState.state;
        } else {
            state = historyState;
        }
    }
    location.state = state;

    return location;
}

/**
 * 根據(jù)pathInfo得到一個location對象
 * 因為createLocation函數(shù)得到location的方式有缺陷:
 * createLocation函數(shù)是根據(jù)window.location對象來得到我們的location對象的
 * 而當有阻塞的情況下, 頁面有可能就不應(yīng)該跳轉(zhuǎn), 不跳轉(zhuǎn)window.location就不會更新
 * window.location對象不更新, 就無法得到新的location傳遞給阻塞函數(shù). 
 * 因此, 需要有一個新的方式, 來得到假設(shè)要跳轉(zhuǎn)時新的location對象
 * @param {*} pathInfo {path: "/xxx/xxx?a=2&b=3#aaa=eaef", state:}
 * @param {*} basename 
 */
export function createLocationFromPath(pathInfo, basename) {
    // 取出pathname
    let pathname;
    pathname = pathInfo.path.replace(/[#?].*$/, "");
    // 處理basename
    let reg = new RegExp(`^${basename}`);
    pathname = pathname.replace(reg, "");

    // 取出search
    let search;
    const questionIndex = pathInfo.path.indexOf("?");
    const sharpIndex = pathInfo.path.indexOf("#");
    // 沒有問號或者問號出現(xiàn)在井號之后, 那么就是沒有search字符串(井號后面的全是hash)
    if (questionIndex === -1 || questionIndex > sharpIndex) {
        search = "";
    } else {
        search = pathInfo.path.substring(questionIndex, sharpIndex);
    }

    // 取出hash
    let hash;
    if (sharpIndex === -1) {
        hash = "";
    } else {
        hash = pathInfo.path.substring(sharpIndex);
    }

    return {
        pathname,
        hash,
        search,
        state: pathInfo.state,
    }
}

/**
 * 根據(jù)path和state, 得到一個統(tǒng)一的對象格式
 * @param {*} path 
 * @param {*} state 
 */
function handlePathAndState(path, state, basename) {
    if (typeof path === 'string') {
        return {
            path: basename + path,
            state,
        }
    } else if (typeof path === 'object') {
        let pathResult = basename + path.pathname;
        const { search = '', hash = '' } = path;
        if (search.charAt(0) !== "?" && search.length > 0) {
            search = "?" + search;
        }
        if (hash.charAt(0) !== "#" && hash.length > 0) {
            hash = "#" + hash;
        }
        pathResult += search;
        pathResult += hash;
        return {
            path: pathResult,
            state: path.state,
        }
    } else {
        throw new TypeError('path must be string or object');
    }
}

/**
 * 產(chǎn)生一個指定長度的隨機字符串, 隨機字符串中可以包含數(shù)字和字母
 * @param {*} keyLength 
 */
function createKey(keyLength) {
    return Math.random().toString(36).substr(2, keyLength);
}


// BlockManager.js文件

export default class BlockManager {

    // 該屬性是否有值, 決定了是否有阻塞
    prompt = null;

    constructor(getUserConfirmation) {
        this.getUserConfirmation = getUserConfirmation;
    }

    /**
     * 設(shè)置一個阻塞, 傳遞一個提示字符串
     * @param {*} prompt 可以是字符串, 也可以是一個函數(shù), 函數(shù)返回一個字符串
     */
    block(prompt) {
        if (typeof prompt !== 'string' && typeof prompt !== 'function') {
            throw new TypeError('block must be string or function');
        }
        this.prompt = prompt;
        return () => {
            this.prompt = null;
        }
    }

    /**
     * 觸發(fā)阻塞, 如果阻塞是個函數(shù), 那么傳入新的location和action
     * @param {*} location 新的location
     * @param {*} action 
     * @param {function} callback 當阻塞完成之后要做的事情, 一般是跳轉(zhuǎn)頁面
     */
    triggerBlock(location, action, callback) {
        // 沒有阻塞, 直接callback()跳轉(zhuǎn)頁面
        if (!this.prompt) {
            callback();
            return;
        }

        let message;
        if (typeof this.prompt === 'string') {
            message = this.prompt;
        } else {
            message = this.prompt(location, action);
        }

        // 調(diào)用getUserConfirmation
        this.getUserConfirmation(message, result => {
            if (result === true) {
                // 可以跳轉(zhuǎn)
                callback();
            } else {
                // 不能跳轉(zhuǎn)
            }
        });
    }

}


// ListenerManager.js文件

export default class ListenerManager {

    // 存放監(jiān)聽器的數(shù)組
    listeners = [];

    addListener(listener) {
        this.listeners.push(listener);
        const unlisten = () => {
            const index = this.listeners.indexOf(listener);
            this.listeners.splice(index, 1);
        }
        return unlisten;
    }

    /**
     * 觸發(fā)所有的監(jiān)聽器
     */
    triggerListeners(location, action) {
        for (const listener of this.listeners) {
            listener(location, action);
        }
    }
    
}

第三步

至此, match, history和location三個對象已經(jīng)可以拿到, 那么接下里進行react-router-dom的相關(guān)組件編寫.
在調(diào)試工具中, 展開組件結(jié)構(gòu)可以看到, BrowerRouter下有一個Router組件, Router組件接收一個屬性history, 維護一個狀態(tài)location, 并且它提供了上下文Router.Provider. 上下文內(nèi)就有match, history和location.

QQ瀏覽器截圖20200507133414.png

BrowserRouter和它內(nèi)部生成的Router的代碼(包含上下文文件)

// BrowserRouter.js文件

import React, { Component } from 'react';
import { createBrowserHistory } from './history/createBrowserHistory';
import Router from '../react-router/Router';

export default class BrowserRouter extends Component {

    history = createBrowserHistory(this.props);

    render() {
        return <Router history={this.history}>
            {this.props.children}
        </Router>
    }
}

// routerContext.js文件

import { createContext } from 'react';

const context = createContext();
context.displayName = "Router";     // 調(diào)試工具內(nèi)顯示的名字

export default context;

// Router.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ctx from './routerContext';
import matchPath from './matchPath';

export default class Router extends Component {

    static propTypes = {
        history: PropTypes.object.isRequired,
        children: PropTypes.node,
    }

    // 放到狀態(tài)中是因為, 當location發(fā)生變化時, 需要更新context
    state = {
        location: this.props.history.location
    }

    // 添加一個監(jiān)聽, 在地址發(fā)生變化的時候, 更新狀態(tài)導致本組件渲染, 重新獲得history, match和location
    // 使得上下文發(fā)生變化, 所有子組件都重新渲染
    componentDidMount() {
        this.unlisten = this.props.history.listen((location, action) => {
            this.props.history.action = action;
            this.setState({
                location
            });
        });
    }

    componentWillUnmount() {
        if (this.unlisten) {
            this.unlisten();
        }
    }

    render() {
        // 不能講ctxValue變量寫成類組件的屬性, 而是每次render重新構(gòu)建一個新地址的對象
        // 這樣才能讓react判定上下文發(fā)生變化, 從而更新組件
        const ctxValue = {
            history: this.props.history,
            location: this.state.location,
            // 在上下文中, 沒有進行匹配, 所以先把match對象的匹配規(guī)則直接寫為"/"
            match: matchPath("/", this.state.location.pathname),
        };

        return <ctx.Provider valule={ctxValue}>
            {this.props.children}
        </ctx.Provider>
    }
}

第四步

接下來, 實現(xiàn)配置各個路徑的Route組件. 通過調(diào)試工具, 我們發(fā)現(xiàn)Route組件內(nèi)是上下文的消費者. 除此之外, 它又提供了一個上下文, 上下文的history和location不變, match對象變?yōu)榱吮敬纹ヅ涞慕Y(jié)果. 由此, 我們知道Route組件的功能, 就是匹配路由, 并將匹配的結(jié)果放入上下文.

Route組件可以傳入很多屬性, 包括:

  • path: 匹配規(guī)則
  • children: 無論是否匹配都要顯示(配置了此項, 則下面兩項無效)
  • render: 渲染函數(shù)(沒有children的話, render優(yōu)先級比component高)
  • component: 如果匹配顯示的組件
  • exact: 是否精確匹配
  • strict: 是否嚴格匹配, 即匹配末尾的"/"
  • sensitive: 是否大小寫敏感

Route.js代碼

// Route.js文件

// Route組件的功能是匹配路由, 并將匹配的結(jié)果放入上下文中

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ctx from './routerContext';
import matchPath from './matchPath';

export default class Route extends Component {

    static propTypes = {
        path: PropTypes.oneOf([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
        children: PropTypes.node,
        render: PropTypes.func,
        component: PropTypes.node,
        exact: PropTypes.bool,
        strict: PropTypes.bool,
        sensitive: PropTypes.bool,
    }

    static defaultProps = {
        path: "/"
    }

    matchRoute(location) {
        const { exact = false, strict = false, sensitive = false } = this.props;
        return matchPath(this.props.path, location.pathname, { exact, strict, sensitive });
    }

    // 需要渲染的內(nèi)容
    renderChildren(ctx) {
        // children有值
        if (this.props.children !== undefined && this.props.children !== null) {
            if (typeof this.props.children === 'function') {
                return this.props.children(ctx);
            } else {
                return this.props.children;
            }
        }
        // children沒有值, 但是render有值
        if (!ctx.match) {
            // 沒有匹配
            return null;
        }
        // 匹配了
        if (typeof this.props.render === 'function') {
            return this.props.render(ctx);
        }

        if (this.props.component) {
            const Component = this.props.component;
            return <Component {...ctx} />
        }

        // 什么屬性都沒填
        return null;
    }

    consumerFunc = (value) => {
        const ctxValue = {
            history: value.history,
            location: value.location,
            match: this.matchRoute(value.location),
        };
        return <ctx.Provider value={ctxValue}>
            {this.renderChildren(ctxValue)}
        </ctx.Provider>
    }

    render() {
        return <ctx.Consumer>
            {this.consumerFunc}
        </ctx.Consumer>
    }
}

第五步

接下來開始實現(xiàn)Switch, withRouter和Link組件.

通過調(diào)試工具查看組件樹, 我們發(fā)現(xiàn)Switch組件的功能, 就是匹配Route子元素, 渲染第一個匹配到的Route. 可以通過循環(huán)Switch組件的children, 依次匹配每一個Route組件, 當匹配到時, 直接渲染并停止循環(huán).

Switch組件代碼

// Switch.js文件

import React, { Component } from 'react';
import matchPath from './matchPath';
import ctx from './routerContext';
import Route from './Route';

export default class Switch extends Component {

    // 循環(huán)children, 得到第一個匹配的Route組件, 若沒有匹配, 返回null
    getMatchChild = ({ location }) => {
        let children = [];
        if (Array.isArray(this.props.children)) {
            children = this.props.children;
        } else if (typeof this.props.children === 'object') {
            children = [this.props.children];
        }
        for (const child of children) {
            if (child.type !== Route) {
                // 子元素不是Route組件
                throw new TypeError("children of Switch component must be type of Route");
            }
            // 判斷子元素是否能夠匹配
            const { path = '/', exact = false, strict = false, sensitive = false } = child.props;
            const result = matchPath(path, location.pathname, { exact, strict, sensitive });
            if (result) {
                // 匹配了
                return child;
            }
        }
        return null;
    }

    render() {
        return <ctx.Consumer>
            {this.getMatchChild}
        </ctx.Consumer>
    }
}

withRouter就是一個高階組件, 用于將路由上下文中的數(shù)據(jù), 作為屬性注入到組件中.

withRouter代碼

// withRouter.js文件

import React from 'react';
import ctx from './routerContext';

export default function withRouter(Comp) {
    function routerWrapper(props) {
        return <ctx.Consumer>
            {
                value => <Comp {...props} {...value} />
            }
        </ctx.Consumer>
    }

    // 設(shè)置在調(diào)試工具中顯示的名字
    routerWrapper.displayName = `withRouter(${Comp.displayName || Comp.name})`;
    return routerWrapper;
}

從調(diào)試工具中, 我們得知, Link組件就是包裝了一個a元素, 它獲得了路由上下文, 于是可以通過history對象的方法進行跳轉(zhuǎn).

Link組件的代碼

// Link.js

import React from 'react';
import ctx from '../react-router/routerContext';
import { parsePath } from 'history';

export default function Link(props) {

    const { to, ...rest } = props;
    return <ctx.Consumer>
        {
            value => {
                let loc;
                if (typeof props.to === 'object') {
                    loc = props.to;
                } else {
                    // 如果props.to是字符串, 那么先轉(zhuǎn)換成location. 因為路徑需要basename
                    // 只有history對象里的createHref方法才會幫我們自動處理basename, 其他地方拿不到basename配置了
                    // 此處為了省力直接使用官方的parsePath函數(shù)(我們自己寫的createLocationFromPath函數(shù)可能有些細節(jié)沒有處理好)
                    // 將props.to轉(zhuǎn)換成location對象
                    loc = parsePath(props.to);
                }
                const href = value.history.createHref(loc);

                return <a {...rest} href={href} onClick={
                    e => {
                        // 阻止默認行為
                        e.preventDefault();
                        value.history.push(loc);
                    }
                }>{props.children}</a>
            }
        }
    </ctx.Consumer>
}

NavLink組件的代碼

import React from 'react';
import Link from './Link';
import ctx from '../react-router/routerContext';
import matchPath from '../react-router/matchPath';
import { parsePath } from 'history';

export default function NavLink(props) {
    const { activeClass = 'active', exact = false, strict = false, sensitive = false, ...rest } = props;
    return <ctx.Consumer>
        {
            ({ location }) => {
                let loc;
                if (typeof props.to === 'string') {
                    loc = parsePath(props.to);
                }
                const result = matchPath(loc.pathname, location.pathname, { exact, strict, sensitive });
                if (result) {
                    return <Link {...rest} className={activeClass} />
                } else {
                    return <Link {...rest} />
                }
            }
        }
    </ctx.Consumer>
}

至此, react-router比較核心的內(nèi)容寫完. 當然其中很多小細節(jié), 沒有處理.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末拙友，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子埃撵，更是在濱河造成了極大的恐慌雇寇，老刑警劉巖氢拥，帶你破解...
    沈念sama閱讀 212,454評論 6贊 493
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異谢床，居然都是意外死亡兄一，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門识腿，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人造壮，你說我怎么就攤上這事渡讼。” “怎么了耳璧？”我有些...
    開封第一講書人閱讀 157,921評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵成箫，是天一觀的道長。 經(jīng)常有香客問我旨枯，道長蹬昌，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,648評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任攀隔，我火速辦了婚禮皂贩，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘昆汹。我一直安慰自己明刷，他們只是感情好，可當我...
    茶點故事閱讀 65,770評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布满粗。 她就那樣靜靜地躺著辈末，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挤聘，一...
    開封第一講書人閱讀 49,950評論 1贊 291
  • 城市分裂傳說
    那天轰枝，我揣著相機與錄音，去河邊找鬼组去。 笑死鞍陨，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的添怔。 我是一名探鬼主播湾戳，決...
    沈念sama閱讀 39,090評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼广料！你這毒婦竟也來了砾脑？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,817評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤艾杏，失蹤者是張志新（化名）和其女友劉穎韧衣，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體购桑，經(jīng)...
    沈念sama閱讀 44,275評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡畅铭，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了勃蜘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片硕噩。...
    茶點故事閱讀 38,724評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖缭贡，靈堂內(nèi)的尸體忽然破棺而出炉擅，到底是詐尸還是另有隱情，我是刑警寧澤阳惹，帶...
    沈念sama閱讀 34,409評論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布谍失，位于F島的核電站，受9級特大地震影響莹汤，放射性物質(zhì)發(fā)生泄漏快鱼。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3贊 316
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一纲岭、第九天 我趴在偏房一處隱蔽的房頂上張望抹竹。 院中可真熱鬧，春花似錦荒勇、人聲如沸柒莉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0贊 21
  • 一樁弒父案沽翔，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽兢孝。三九已至窿凤，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間跨蟹，已是汗流浹背雳殊。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窗轩，地道東北人夯秃。 一個月前我還...
    沈念sama閱讀 46,503評論 2贊 361
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像痢艺，于是被迫代替她去往敵國和親仓洼。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2贊 350