引言
我们日常中使用 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 的时候，只要是被 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.js 组件，主要是给子组件提供路由信息，因为其基础结构如下：
import React from 'react';
import RouterContext from './Context';
const HashRouter = (props) => {
return
{ props.children }
}
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
{props.children}
Route 组件
上面父组件已经通过 context 将路径传递给了 Route 子组件，Route 子组件就可以通过useContext 去消费父组件提供的 location，进而进行路径匹配，决定组件的渲染。
// 获取 pathname 路径
const { location: { pathname } } = useContext(RouterContext);
// 获取 path 和 Component 属性
const { path, component: Component } = props;
// 判断路径是否匹配，匹配返回对应的组件
if ( pathname === path ) return 现在一个，基本的匹配就完成了，你可以手动在地址栏上输入对应的 hash 值，就可以看到匹配的组件了。
这么匹配显然是有问题吧，因为它只能精确匹配，不能包含匹配，即路径为 home/1 的时候匹配不到 Home ，这是有问题的，我们需要将匹配规则进行修改，改成正则匹配。
这里我们利用一个第三方的库 Path-to-RegExp 来实现，它的介绍和详细用法请戳 这里
// path 转正则进行匹配
let reg = pathToRegexp(path, [], { end: false });
// 判断路径是否匹配，匹配返回对应的组件
let result = pathname.match(reg);
if ( result ) return 其中 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 push(to)}>{props.children}
}
Redirect 组件
有时候我们希望用户访问到某一路由时重定向到其他路由，例如我们如果输入不合法的路由，匹配不成功的时候我们希望重定向到我们的首页 /home 上去，就需要用到 Redirect 组件。
App.js 组件稍做修改：
在我们的 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 这样，子组件就可以获取 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 通过 keys 查询匹配的 name 属性值，通过 values 查询匹配的 name 属性值对应的value 值，之后将其放到 match 对象中，一并传递给子组件，子组件就可以在 props 的 match 中查询到该值。
结语
至此，我们已经实现了一个简易版的 react-router ， 有没有感到一丝欣慰？
相信你能阅读到这里，对 react-router 有了一个较深的理解，当你深入了解之后发现 react-router 的实现非常巧妙，并不是特别复杂，当然，这些基础功能也只是冰山一角，还有更多更强大功能等着你去实现。
代码已上传github，需要的小伙伴自行查阅！