阅读 1131

手动实现一个 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 中,用于后期测试我们的页面跳转,这里我已 HomeCategoryProfile三个组件为例。

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,即 createContextuseContext,它可以实现跨组件的数据传递。

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

import React from 'react'

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

export default RouterContext;

复制代码

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

Router 组件

上面我们大概了解了 react-router 的基本用法,即 RouterRoute 组件。

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

我们在 react-router-dom 文件夹下新建,index.js 入口文件 ,以及 HashRouter.jsRoute.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,里面包含了 pathnamehash 等参数,因此我们需要通过 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 的时候,会同时匹配 homehome/1 两个路径所对应的组件,而我们就想只匹配一个的时候,我们需要加上 exact 参数。

我们上述代码只需要简单的修改即可,end 参数的值通过结构 propsexact 参数来获取,默认为 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 页面~

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

这是因为,我们并没有做处理,虽然匹配到了 categoryprofile 路由,但是也并不妨碍继续往下执行,就又到了 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}/>;
复制代码

这样,子组件就可以获取 historylocation 等参数,即可以在组件中通过 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 对象中,一并传递给子组件,子组件就可以在 propsmatch 中查询到该值。

结语

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

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

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