开源一个react路由缓存库

Github仓库

背景

1. 产品希望可以像浏览器那样每打开一个路由，会多一个tab，用户可以切换tab访问之前加载过的页面，且不会重新加载。
2. 真就产品一句话……

Github上有轮子了吗

1. Github上开箱即用的轮子是基于react-router-dom V5实现的，我看了一下issue作者表示不会支持V6版本。但是我的项目路由是V6版本的。
2. 后来在Github上找到了另外一个项目是基于V6实现的，但是这是一个类似Demo的项目，没有提供API开箱即用的功能。

功能点

1. 实现一个React版的keep-alive组件，被他包裹的组件会被缓存，下次再打开不需要重新走create生命周期
2. Tab组件
   • 切换路由时新增一个tab，title从路由信息里面自动读取
   • tab支持关闭，下次再进入相同的路由会重新加载
   • 同时支持关闭所有tab（快捷操作，但是会保留当前tab）
3. 实现activated、deactivated生命周期函数。
   • 在Vue2（不知道Vue3是不是）的时候activated的生命周期在首次加载时不会触发，因为它不是从未激活切换到激活的状态。这会导致create 和 activated经常要写相同的代码。
   • 我实现的activated则会在首次被激活时也会被调用，不知道算不算优化！
4. 开箱即用的功能，不需要太多额外的配置。

安装

// npm
npm i react-route-cache -S
// pnpm
pnpm i react-route-cache -S
// yarn
yarn add react-route-cache

使用

1. 给Layout组件的outlet加上keep-alive

// Layout.tsx
import { KeepAlive, KeepAliveScope, RouterTabs } from 'react-route-cache';
import { useOutlet } from 'react-router-dom';const Layout = () => {// 需要使用useOutletconst outlet = useOutlet();return (<KeepAliveScope><RouterTabs /><KeepAlive>{outlet}</KeepAlive></KeepAliveScope>);
};export default Layout;

2. 路由定义需要增加name属性

// router.ts
// 也可以是createHashRouter
import Layout form './Layout'createBrowserRouter([{path: "/",element: <Layout />,loader: rootLoaderchildren: [{path: "events",element: <Event />,// 增加name属性，否则标签没有title，展示出现问题handle: { name: "事件" },}]}
]);

3. 生命周期函数
   • useActivated返回的方法会在Deactivated的时候执行。
   • 第二个可选参数是一个依赖项数组，为了更新回调函数里的依赖，一般不会用到，功能类似useCallback，依赖变化不会执行函数。

import { useActivated, useDeactivated } from 'react-route-cache';export const Demo = () => {useActivated(() => {console.log('激活')return () => {console.log('activated返回的方法会在Deactivated的时候执行')}});useDeactivated(() => {console.log('离开组件')});return <div>123</div>;
};

其他API

1. mode
   • 默认匹配路由path，path变化则会新增一个tab，也就是如果查询参数变化不会新增一个tab缓存组件
   • 如果希望查询参数变化也会新增一个tab需要将mode改为search
2. nameKey：如果路由name已被占用，可以通过该字段获取handle下其他字段的信息作为tab的title

interface KeepAliveScopeProps {mode?: 'path' | 'search';nameKey?: string;
}
<KeepAliveScope mode="search" nameKey="tabName" />

3. close、closeAll、closeNavigator
   • close方法用于关闭当前标签页
   • closeAll用于关闭除了当前激活的tab所有的标签页
   • closeNavigator是为了解决比如表单创建页，创建完之后需要跳转到其他路由。closeNavigator会关闭当前创建页标签，然后跳转到指定路由。是close()和navigator(url)的语法糖。

import { useKeepAlive } from '../hooks/use-keep-alive';
...const { close, closeAll, closeNavigator } = useKeepAlive();close()closeAll()// 是close()和navigator方法跳转到其他路由closeNavigator(url)
...

最后

1. 都看到这了，可以给我的Github仓库点个小小的Star吗？欢迎给我提Issue、共建。
2. 有兴趣可以加我微信号：vgbire，一起了解更多前端咨询。
3. 如果有200赞的话，我会再出一期如何实现react路由缓存的文章。