React -- 自己实现一个react-router-dom里面的一些组件(简单路由）

本次主要实现的是Hash路由，也就是监听/#/后面的hash值得变化。

使用过react的都知道，this.props上面有一个比较重要的属性location,match, history等，这一次我们实现里面的几个简单属性，用于完成路由,如下：

location: {pathname } history: { push}  match: { url, path, params}

由于设计到父子组件传递，所有我们用到了context.

对于hash的改变我们可以在window注册hashchange事件。

HashRouter组件

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

export default class HashRouter extends Component {
    constructor (props) {
        super(props);
        this.state = { location: {}, history: {}, match: {}};
        this.handleHash = this.handleHash.bind(this);
    }
    handleHash () {
        const hash = window.location.hash.slice(1); //获取#后面的路径
        this.setState( (perProps, perState) => {
            return {
                ...perState,
                location: {