手动实现一个 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,需要的小伙伴自行查阅!

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):