从零开始实现一个react-router-dom插件

一、回顾一下官方react-router-dom的使用

要想自己实现一个react-router-dom，就必须先了解一下react-router-dom的基本使用，react-router-dom与vue-router有点不同，react-router-dom采用的是去中心化路由，所以其不需要写一个单独的router.js来集中配置和管理路由，如:

①引入react-router-dom模块，react-router-dom中包含了两种路由，即HashRouter和BrowserRouter，其中HashRouter采用的是hash值的变化来切换路由，BrowserRouter采用的是history api来切换路由。

// 引入HashRouter
import {HashRouter as Router} from "react-router-dom";
// 或者引入BrowserRouter，二者引入其中的一个即可
import {BrowserRouter as Router} from "react-router-dom";

② 用<Router>组件包裹<App />

ReactDOM.render(
    <Router>
      <App />
    </Router>,
  document.getElementById('root')
);

③ 在需要使用路由的地方，引入<Route>组件即可。

import {Route} from "react-router-dom"
class App extends Component {
    render() {
        <Route path="/" component={Home} exact></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/user/:name/:age" component={User}></Route>
    }
}

④ 光引入<Route>组件只能根据浏览器地址栏渲染相应的组件，我们还需要引入<Link>组件才能显示相应的路由切换链接(a标签)，如:

import { Link } from "react-router-dom";
<!--使用Link组件会渲染成a标签，可以进行路由的切换-->
<ul className="nav">
    <li><Link to="/">Home</Link></li>
    <li><Link to= {
   { pathname: "/about", query: {name: "lihb"}}}>About</Link></li>
    <li><Link to="/user/lihb/28">User</Link></li>
</ul>

⑤ react路由中路径匹配的时候，如果有多个<Route>匹配到，那么匹配到的<Route>都会被渲染出来，我们可以用<Switch>组件将一组<Route>包裹起来，这样就只会渲染第一个匹配到的<Route>组件，如:

import { Switch, Route } from "react-router-dom";
<!--使用Switch组件避免重复渲染-->
<Switch>
    <Route path="/" component={Home} exact></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/user/:name/:age" component={User}></Route>
</Switch>

⑥ 为了避免所有<Route>都无法匹配的时候，显示空白页面，我们可以引入一个<Redirect>组件将其重定向到某个页面，如:

import { Redirect, Switch, Route } from "react-router-dom";
<Switch>
    <Route path="/" component={Home} exact></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/user/:name/:age" component={User}></Route>
    <Redirect to="/"></Redirect><!--重定向到首页-->
</Switch>

二、react-router-dom原理

react-router-dom利用了Context API，通过上下文对象将当前路由信息对象注入到<Router>组件中，所以<Router>组件中render()渲染的内容就是Con