Github & Demo
Github仓库
CodeSandbox Demo
背景
- 产品希望可以像浏览器那样每打开一个路由，会多一个tab，用户可以切换tab访问之前加载过的页面，且不会重新加载。
- 真就产品一句话……
Github上有轮子了吗
- Github上开箱即用的轮子是基于react-router-dom V5实现的，我看了一下issue作者表示不会支持V6版本。但是我的项目路由是V6版本的。
- 后来在Github上找到了另外一个项目是基于V6实现的，但是这是一个类似Demo的项目，没有提供API开箱即用的功能。
功能点
- 实现一个React版的keep-alive组件，被他包裹的组件会被缓存，下次再打开不需要重新走create生命周期
- Tab组件
- 切换路由时新增一个tab，title从路由信息里面自动读取
- tab支持关闭，下次再进入相同的路由会重新加载
- 同时支持关闭所有tab（快捷操作，但是会保留当前tab）
- 实现activated、deactivated生命周期函数。
- 在Vue2（不知道Vue3是不是）的时候activated的生命周期在首次加载时不会触发，因为它不是从未激活切换到激活的状态。这会导致create 和 activated经常要写相同的代码。
- 我实现的activated则会在首次被激活时也会被调用，不知道算不算优化！
- 开箱即用的功能，不需要太多额外的配置。
安装
// npm
npm i react-route-cache -S
// pnpm
pnpm i react-route-cache -S
// yarn
yarn add react-route-cache
使用
- 给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;
- 路由定义需要增加name属性
// router.ts
// 也可以是createHashRouter
import Layout form './Layout'createBrowserRouter([{path: "/",element: <Layout />,loader: rootLoaderchildren: [{path: "events",element: <Event />,// 增加name属性，否则标签没有title，展示出现问题handle: { name: "事件" },}]}
]);
- 生命周期函数
- 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
- mode
- 默认匹配路由path，path变化则会新增一个tab，也就是如果查询参数变化不会新增一个tab缓存组件
- 如果希望查询参数变化也会新增一个tab需要将mode改为search
- nameKey：如果路由name已被占用，可以通过该字段获取handle下其他字段的信息作为tab的title
interface KeepAliveScopeProps {mode?: 'path' | 'search';nameKey?: string;
}
<KeepAliveScope mode="search" nameKey="tabName" />
- 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)
...
最后
- 都看到这了，可以给我的Github仓库点个小小的Star吗？这真的对我很重要！重要！重要！欢迎给我提Issue、共建。
- 有兴趣可以加我微信号：vgbire，一起了解更多前端咨询。
- 如果有200赞的话，我会再出一期如何实现react路由缓存的文章。
