手动实现一个 react-router-dom

引言

我们日常中使用 react 开发项目，那么一定会跟 react-rouer 打交道，但是由于 react 路由的设计和用法，使得很多刚使用 react 的同学在接触到react-router的时候就会很蛋疼，不知道其匹配的机制和原理。

追本溯源一直是我们学习和提升过程中一个很重要的过程，本文就以 HashRouter 为例，结合最新的 react-hooks 语法，一步步的实现一个属于自己的 react-router，看一看 react-router 到底应该怎么实现！

初始化项目

我们需要做一些前期的准备工作，初始化项目这一步是必须的，我们通过

npx create-react-app my-react-router

脚手架工具初始化一个项目，为了方便测试，将里面没用的文件删除掉，保留一个比较干净的 workspace。

新建 react-router-dom 的文件夹，存放我们自定义的 router 组件。

新建 views 文件夹，先自定义三个组件并将其导入到 App.js 中，用于后期测试我们的页面跳转，这里我已 Home，Category，Profile三个组件为例。

Context api

react-router 最基本的用法如下：

<Router>
    <div>
      <Route path="/">
        <Home />
      </Route>
      <Route path="/news">
        <News />
      </Route>
    </div>
  </Router>

我们在使用 Router 的时候，只要是被 Route 包裹的组件，我们都可以通过 props 属性获取到改组件的路由信息，而这些信息都是往往都是通过父组件 Router 传递过去的，这也是为什么要用 Router 包裹 Route 的原因。

当 Route 嵌套过深，路由信息更为复杂的时候，为了解决嵌套路由之间的数据共享，以及状态更新的问题，需要引入新的 api，即 createContext 和 useContext，它可以实现跨组件的数据传递。

因此，我们在 react-router-dom 文件夹下创建一个 Context 文件，用于管理路由信息。

import React from 'react'

// 创建路由共享 context
const RouterContext = React.createContext({});

export default RouterContext;

关于 createContext 和 useContext 的用法，这里不在赘述，不了解的小伙伴，这里给你们准备了一篇文章，供你参考。

Router 组件

上面我们大概了解了 react-router 的基本用法，即 Router 和 Route 组件。

我们不妨也仿照着先来构建这两组件。

我们在 react-router-dom 文件夹下新建，index.js 入口文件，以及 HashRouter.js 和 Route.js 两个组件文件，并在入口文件导出，App.js 引入即可。

App.js 组件基本内容如下：

import { HashRouter as Router , Route } from './react-router-dom'
function App () {
    return (
        <Router>
            <div className="App">
                <div className="">
                    <Route path={'/home'} component={Home} />
                    <Route path={'/category'} component={Category} />
                    <Route path={'/profile'} component={Profile} />
                </div>
            </div>
        </Router>
    );
}

Router.js 组件，主要是给子组件提供路由信息，因为其基础结构如下：

import React from 'react';
import RouterContext from './Context';

const HashRouter = (props) => {
    return <RouterContext.Provider value={{a : 1}}>
        { props.children }
    </RouterContext.Provider>
}

export default HashRouter;

其中 props.children 就是 Router.js 组件所包裹的子组件的内容。

初始化路由

如果初始化没有 hash 值，在初始化路由的时候默认会被自动到导向到 #/ 根路由上去，我们需要在 useEffect 中做处理

useEffect(()=>{
    // 初始化路由信息
    window.location.hash = window.location.hash || '/';
},[])

构建 location 信息

路由信息里有一个非常重要的属性 location，里面包含了 pathname ， hash 等参数，因此我们需要通过 useState 构建这么一个状态；

// location 状态
const [location, setLocation] = useState({
    pathname: window.location.hash.slice(1) || '/'
})

监控 hash 变化

有了 location 的状态，我们需要在 hashchange 的时候去更改它，需要在 useEffect 添加 onHashChange 事件，监控 hash 变化，并更新 location 的值。

// hash 变化处理函数
const onHashChange = () => {
    setLocation((location) => ({
        ...location,
        pathname: window.location.hash.slice(1) || '/'
    }))
}

useEffect(() => {
    // 初始化路由信息
    window.location.hash = window.location.hash || '/';
    // 监控 hash 变化
    window.addEventListener('hashchange', onHashChange, false);
}, [])

传递 location 属性

父组件已经可以根据 hash 状态更新 location 的值，那么 Route 子组件需要根据 pathname 的状态去匹配对应的 Component，所以父组件需要通过 context 的值将 location 信息传递下去。

// 传递给子组件
const value = {
    location
}
return <RouterContext.Provider value={value}>
    {props.children}
</RouterContext.Provider>

Route 组件

上面父组件已经通过 context 将路径传递给了 Route 子组件，Route 子组件就可以通过useContext 去消费父组件提供的 location，进而进行路径匹配，决定组件的渲染。

// 获取 pathname 路径
const { location: { pathname } } = useContext(RouterContext);
// 获取 path 和 Component 属性
const { path, component: Component } = props;
// 判断路径是否匹配，匹配返回对应的组件
if ( pathname === path ) return <Component/>;
// 不匹配返回 null
return null;

现在一个，基本的匹配就完成了，你可以手动在地址栏上输入对应的 hash 值，就可以看到匹配的组件了。

这么匹配显然是有问题吧，因为它只能精确匹配，不能包含匹配，即路径为 home/1 的时候匹配不到 Home ，这是有问题的，我们需要将匹配规则进行修改，改成正则匹配。

这里我们利用一个第三方的库 Path-to-RegExp 来实现，它的介绍和详细用法请戳这里

// path 转正则进行匹配
let reg = pathToRegexp(path, [], { end: false });
// 判断路径是否匹配，匹配返回对应的组件
let result = pathname.match(reg);
if ( result ) return <Component/>;

其中 end:false 表示不精确匹配。

ok，这样一来就比较靠谱了~

虽然解决了上面的问题，但我们访问 home/1 的时候，会同时匹配 home 和 home/1 两个路径所对应的组件，而我们就想只匹配一个的时候，我们需要加上 exact 参数。

我们上述代码只需要简单的修改即可，end 参数的值通过结构 props 的 exact 参数来获取，默认为 false 即可。

// 获取 path 和 Component 属性
const { path, component: Component, exact = false } = props;
// path 转正则进行匹配
let reg = pathToRegexp(path, [], { end: exact });

Link 组件

我们目前实现的结果是可以通过手动输入 hash 的值，可以跳转到对应的组件，这样显然很不方便，我们希望的是可以通过点击来完成这一功能，需要提供一个 Link 组件。

先在 react-router-dom 目录下新建 Link 组件，并在 index.js 中导出。

我们需要点击跳转，那么就需要有一个跳转的方法 push ，该方法应该是由父组件 Router 提供的，因此我们在 Router 组件新增一个 history 属性，里面有一个 push 方法。

// Rouer.js

// 传递给子组件
const value = {
    location,
    history : {
        push(to){
            window.location.hash = to;
        }
    }
}

然后在 Link 组件接收使用即可

const Link = (props) => {
    // 获取 push 方法
    const { history: { push } } = useContext(RouterContext);
    // 获取跳转路径
    const { to } = props;
    // 跳转
    return <a onClick={() => push(to)}>{props.children}</a>
}

Redirect 组件

有时候我们希望用户访问到某一路由时重定向到其他路由，例如我们如果输入不合法的路由，匹配不成功的时候我们希望重定向到我们的首页 /home 上去，就需要用到 Redirect 组件。

App.js 组件稍做修改：

<Route path={'/home'} exact={true} component={Home}/>
<Route path={'/category'} component={Category}/>
<Route path={'/profile'} component={Profile}/>
<Redirect to={'/home'} />

在我们的 react-router-dom 文件夹下新建 Redirect.js 文件并在 index.js 导出。

Redirect 组件与 Link 类似，只不过它不做热河渲染，加载完毕就直接跳转。

const Redirect = (props) => {
    // 获取 push 方法
    const { history: { push } } = useContext(RouterContext);
    // 获取跳转路径
    const { to } = props;
    // 重定向跳转
    useEffect(() => {
        push(to);
    }, [push, to]);
    // 不渲染
    return null;
}

这会，你随便敲一个不存在路径，就会帮你重定向到 home 页面~

但是，你再点击 category、profile 路由的时候也会闪一下后重定向到 home 页面。

这是因为，我们并没有做处理，虽然匹配到了 category 和 profile 路由，但是也并不妨碍继续往下执行，就又到了 Redirect 组件，应该说是我们无论如何匹配都会重定向到 home 页面，这显然是不合理的，需要通过 Swtich 组件进行包裹。

Swtich 组件

Swtich 组件要实现的功能就是当我们匹配到了路径之后，就不需要继续匹配，解决上述重定向的问题。

我们在 react-router-dom 文件夹下新建 Swtich.js 文件并在 index.js 导出。

实现思路就是，循环遍历 Switch 的子组件，判断当前路径是否与子组件的路由匹配，匹配成功后返回即可。

const Switch = (props) => {
    // 获取 pathname 路径
    const { location: { pathname } } = useContext(RouterContext);
    // 子组件
    const children = props.children;
    // 循环遍历进行匹配
    for ( let i = 0; i < children.length; i++ ) {
        // 子组件
        let child = children[i];
        // 子组件的路径（redirect 没有 path 属性）
        let path = child.props.path || '';
        // 路由正则
        let reg = pathToRegexp(path, [], { end: false });
        // 如果匹配成功
        if( reg.test(pathname )) return child;
    }
    // 匹配不成功
    return null;
}

现在只要在我们的 Route 上用 Switch 包裹一下，就可以解决上述问题了！

现在，我们的基本路由已经实现了一大半了，赞！

组件Props

目前我们的跳转只能靠 Link 或者 Redirect 组件来实现，实际上我们并不希望这样，我们希望每个组件都可以获取 Router 组件的 history 以及 location 等属性，方便子组件的使用。

实现方式也非常简单，只需要将我们的 Route 稍作修改即可，在渲染 Component 的时候以 props 的方式传递给子组件。

// 传递给子组件的数据
const { location, history } = useContext(RouterContext);
const componentProps = {
    location,
    history,
    match: {}
}
if ( result ) return <Component {...componentProps}/>;

这样，子组件就可以获取 history ，location 等参数，即可以在组件中通过 props.history.push 方法进行跳转了。

参数路由

类似 /detail/:id 这种带参数的路由实际生产是非常常见的，我们要动态获取 id 的值，好在 path-to-regexp 这个包给我们提供了解析路由的参数的方法，只需要照搬即可。

将 Route.js 组件修改一下，

const Route = (props) => {
    // 获取 pathname 路径
    const { location: { pathname } } = useContext(RouterContext);
    // 获取 path 和 Component 属性
    const { path, component: Component, exact = false } = props;
    // path 转正则进行匹配
    let keys = [];
    let reg = pathToRegexp(path, keys, { end: exact });
    // 判断路径是否匹配，匹配返回对应的组件
    let result = pathname.match(reg);
    let [url, ...values] = result || [];
    // 传递给子组件的数据
    const { location, history } = useContext(RouterContext);
    const componentProps = {
        location,
        history,
        match: {
            path: pathname,
            params: keys.reduce((obj, current, idx) => {
                obj[current['name']] = values[idx]
                return obj;
            }, {}),
            url
        }
    }
    if ( result ) return <Component {...componentProps}/>;
    // 不匹配返回 null
    return null;
}

通过 keys 查询匹配的 name 属性值，通过 values 查询匹配的 name 属性值对应的value 值，之后将其放到 match 对象中，一并传递给子组件，子组件就可以在 props 的 match 中查询到该值。

结语

至此，我们已经实现了一个简易版的 react-router ，有没有感到一丝欣慰？

相信你能阅读到这里，对 react-router 有了一个较深的理解，当你深入了解之后发现 react-router 的实现非常巧妙，并不是特别复杂，当然，这些基础功能也只是冰山一角，还有更多更强大功能等着你去实现。

代码已上传github，需要的小伙伴自行查阅！