react-router2 - 实现 HashRouter 和 Route组件理解实现原理

参考源码库的Router.js

原生库的使用

官方路由使用效果演示

实现思路

1. 先导出俩组件

react-router-dom / index.js

import Route from './Route';
import HashRouter from './HashRouter';
export { HashRouter, Route };

2. 创建上下文对象

import React from 'react';
export default React.createContext();

3. HashRouter组件

import React, { Component } from 'react';
import Context from './Context';
// #/ =>  /, #/home => /home , #/about => /about
let hash = () =>  window.location.hash.slice(1);
class HashRouter extends Component {
  state = {
    location: {
      pathname: hash()|| "/",  // 第一次初始化的时候可能没有值,先给个默认的
    },
  };
  UNSAFE_componentWillMount() {
    // 如果hash 值改变了，就改变状态
    window.addEventListener('hashchange', () => {
      this.setState({
        location: {
          pathname: hash() || '/',  // 如果有就使用你的，否则使用默认的 /
        },
      });
    });
  }
  render = () => (
    <Context.Provider value={this.state}>
      {this.props.children}
    </Context.Provider>
  );
}
export default HashRouter;

4. Route 组件

import React, { PureComponent } from 'react';
import Context from './Context';
class Route extends PureComponent {
  static contextType = Context;
  render() {
    // 获取到用户传入的path 和 组件
    const { component: RouteComponent, path } = this.props;
    // 获取到监听到的变化后的hash值
    const { pathname } = this.context.location;
    // 比较， 如果相等，就渲染对应的组件，否则，渲染null
    return pathname === path ? <RouteComponent /> : null;
  }
}
export default Route;

因为，现在没有做跳转的逻辑， 需要你手动在地址栏改变hash值， 然后按下enter 确定， 组件才会变化，手写效果演示