手动实现一个 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 的时候,只要是被 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 ;
// 不匹配返回 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 ;
其中 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 ;
// 不匹配返回 null
return null;
}
通过 keys 查询匹配的 name 属性值,通过 values 查询匹配的 name 属性值对应的value 值,之后将其放到 match 对象中,一并传递给子组件,子组件就可以在 props 的 match 中查询到该值。
结语
至此,我们已经实现了一个简易版的 react-router , 有没有感到一丝欣慰?
相信你能阅读到这里,对 react-router 有了一个较深的理解,当你深入了解之后发现 react-router 的实现非常巧妙,并不是特别复杂,当然,这些基础功能也只是冰山一角,还有更多更强大功能等着你去实现。
代码已上传github,需要的小伙伴自行查阅!
发表评论 (审核通过后显示评论):