手写 React-Router（Hook版）

参考文档：

• react-router
• git react-router

Hook 实现router

组件思想

根据运行环境安装react-router-dom，它依赖react-router，安装会自动安装react-router。

react-router 中奉行一切皆组件的思想。

• 路由，如BrowserRouter、HashRouter
• 路由匹配，如Route、Switch
• 路由导航，如Link、NavLink、Redirect

关于router的具体使用和API可以查看相关文档事例。

这里手写的代码都是通过hook来实现的，如果想看基于类组件的实现，可以去看官方的源码

手写 BrowserRouter

react-router的源码中，BrowserRouter的实现，是创建了一个顶层的history、location、match等参数，通过Context.provider将状态向下传递，通过中间层组件Router实现核心功能。

这里将Router的实现一并揉进了BrowserRouter中实现，简化了一些额外的处理。

BrowserRouter主要做了两件事：

• 创建了一个顶层history，通过Context分发
• 监听history中location的变化，进行reRender

import React, {
    useContext, useState, useEffect } from 'react'
import {
    createBrowserHistory } from 'history'

const RouterContext = React.createContext()

export function BrowserRouter({
    children }) {
   
    // 1. 创建history,location等对象，使用Context向下传递，
    const history = createBrowserHistory()
    const [location, setLocation] = useState(history.location)

    // 2. 监听location的变化，重绘
    useEffect(() => {
   
        const clearListen = history.listen(location => {
   
            console.