摘要：要實現的功能我們使用開發項目的時候，基本上是單頁面應用，也就離不開路由。路由看似神秘，當我們簡單的模擬一下它的核心功能后，發現也就這么回事兒。實現的邏輯是，返回中跟匹配到的第一個孩子。

我們使用React開發項目的時候，基本上是單頁面應用，也就離不開路由。路由看似神秘，當我們簡單的模擬一下它的核心功能后，發現也就這么回事兒。本文就詳細的介紹一下react-router-dom 的 HashRouter的核心實現邏輯。

本文實現的功能主要包含：

HashRouter

Route

Link

MenuLink

Switch

Redirect

先不說代碼是怎樣寫的，先上圖，讓大家看一下這個HashRouter到底是個什么東東:

好吧，肯定有人會說這些圈圈又是什么東東呀，客官不要著急，待我慢慢解釋：

HashRouter是一個大的容器，它控制著他自己到底渲染成什么樣子，那么它是通過什么控制的呢，看它的名字就能猜出來，那就是window.location.hash。

當HashRouter開始渲染的時候就會拿它自己身上的pathname屬性跟它肚子里的Route的path進行匹配，匹配上的話，就會渲染Route的component對應的組件。

Link是怎樣切換路由的呢，很簡單，就是通過this.props.history.push(path)來改變HashRouter中的pathname屬性，進而驅動Route們 進行重新渲染，再次匹配我們的路由，最終實現路由的切換。

介紹了一下簡單的邏輯，接下來我們就看一下具體是怎樣實現的吧，如下圖：

HashRouter是一個繼承了React.Component的類，這個類上的state包括location,監聽著hash的變化以驅動Route組件的重新渲染，另外還有一個history屬性，可以切換頁面的路由。

本文要實現的功能中包括Route、Link、MenuLink、Switch、 Redirect，其中Route的是基礎是核心，MenuLink和某些有特定邏輯的渲染都是在Route的基礎上實現的。

Route組件上可以接收三種變量，包括component、render、children，其中render、children是都是函數，render是根據特定的邏輯渲染元素，children是用來渲染MenuLink,這兩個函數都接收當前路由的props，函數的返回值是要渲染的元素。

Switch實現的邏輯是，返回children中跟hash匹配到的第一個“孩子”。

HashRouter將window.loacation.hash跟自己的state掛鉤，通過改變自己的state驅動頁面的重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class HashRouter extends Component {
    constructor() {
        super();
        this.state = {
            location: {
                pathname: window.location.hash.slice(1) || "/", // 當前頁面的hash值
                state: {}   //保存的狀態
            }
        };
    }
    
    // 定義上下文的變量類型
    static childContextTypes = {
        location: PropTypes.object,
        history: PropTypes.object
    }
    
    // 定義上下文的變量
    getChildContext() {
        return {
            location: this.state.location,
            history: {
                push: (path) => { // 就是更新 window.hash值
                    if (typeof path === "object") {
                        let {pathname, state} = path;
                        this.setState({
                            location: {
                                ...this.state.location,
                                state // {from: "/profile"}
                            }
                        }, () => {
                            window.location.hash = pathname;
                        })
                    } else {
                        window.location.hash = path;
                    }
                }
            }
        }
    }
    
    render() {
        return this.props.children; // 渲染頁面元素
    }
    
    componentDidMount() {
        window.location.hash = window.location.hash.slice(1) || "/";
        // 監聽window的hash的變化，驅動頁面的重新刷新
        window.addEventListener("hashchange", () => {
            this.setState({
                location: {
                    ...this.state.location,
                    pathname: window.location.hash.slice(1) || "/"
                }
            });
        })
    }
}

Route的渲染核心邏輯就是將自己的path和當前頁面的hash進行匹配，匹配上了就渲染相應的元素，匹配不上就什么都不渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";
import pathToRegexp from "path-to-regexp"

export default class Route extends Component {
    // 定義上下文context的類型
    static contextTypes = {
        location: PropTypes.object,
        history: PropTypes.object
    }
    
    render() {
        // 解構傳入Route的props
        let {path, component: Component, render, children} = this.props;
        
        // 解構上下文的屬性
        let {location, history} = this.context;
        let props = {
            location,
            history
        };
        
        // 將傳入Route的path和當前的hash進行匹配
        let keys = [];
        let regexp = pathToRegexp(path, keys, {end: false});
        keys = keys.map(key => key.name);
        
        let result = location.pathname.match(regexp);
        
        if (result) { // 匹配上了
            let [url, ...values] = result;
            props.match = {
                path,
                url,
                params: keys.reduce((memo, key, index) => { // 獲取匹配到的參數
                    memo[key] = values[index];
                    return memo;
                }, {})
            };
            
            if (Component) { // 普通的Route
                return ;
            } else if (render) { // 特定邏輯的渲染
                return render(props);
            } else if (children) { // MenuLink的渲染
                return children(props);
            } else {
                return null;
            }
        } else { // 沒有匹配上
            if (children) { // MenuLink的渲染
                return children(props);
            } else {
                return null;
            }
        }
    }
}

Redirect就干了一件事，就是改變HashRouter的state,驅動重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class Redirect extends Component {
    // 定義上下文context的Type
    static contextTypes = {
        history: PropTypes.object
    }
    
    componentDidMount() {
        // 跳轉到目標路由
        this.context.history.push(this.props.to);
    }
    
    render() {
        return null;
    }
}

import React, {Component} from "react";
import Route from "./Route";
import Link from "./Link"

export default ({to, children}) => {
    // 如果匹配到了，就給當前組件一個激活狀態的className
    return  (
        

            {children}
        
    )
    }/>
}

Link就是渲染成一個a標簽，然后給一個點擊事件，點擊的時候更改HashRouter的狀態，驅動重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class Link extends Component {
    static contextTypes = {
        history: PropTypes.object
    }
    
    render() {
        return (
             this.context.history.push(this.props.to)}>{this.props.children}
        )
    }
}

import React, {Component} from "react";
import PropTypes from "prop-types";
import pathToRegexp from "path-to-regexp";

export default class Switch extends Component {
    static contextTypes = {
        location: PropTypes.object
    }
    
    render() {
        let {pathname} = this.context.location;
        
        let children = this.props.children;
        for (let i = 0, l = children.length; i < l; i++) {
            let child = children[i];
            let path = child.props.path;
            
            if (pathToRegexp(path, [], {end: false}).test(pathname)) {
                // 將匹配到的第一個元素返回
                return child;
            }
        }
        return null
    }
}

好了，這幾個功能介紹完了，你是否對HashRouter的原理有所了解了呢？本文只是貼出部分代碼，如果有需要請看demo可以手動體驗一下哦。

參考文獻：

react-router