叙永县城乡建设部网站首页,专业做网站的公司有哪些,wordpress教程 付费,做服装辅料一般什么网站找客户Github仓库
背景
产品希望可以像浏览器那样每打开一个路由#xff0c;会多一个tab#xff0c;用户可以切换tab访问之前加载过的页面#xff0c;且不会重新加载。真就产品一句话……
Github上有轮子了吗
Github上开箱即用的轮子是基于react-router-dom V5实现的#xff…Github仓库
背景
产品希望可以像浏览器那样每打开一个路由会多一个tab用户可以切换tab访问之前加载过的页面且不会重新加载。真就产品一句话……
Github上有轮子了吗
Github上开箱即用的轮子是基于react-router-dom V5实现的我看了一下issue作者表示不会支持V6版本。但是我的项目路由是V6版本的。后来在Github上找到了另外一个项目是基于V6实现的但是这是一个类似Demo的项目没有提供API开箱即用的功能。
功能点
实现一个React版的keep-alive组件被他包裹的组件会被缓存下次再打开不需要重新走create生命周期Tab组件 切换路由时新增一个tabtitle从路由信息里面自动读取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 (KeepAliveScopeRouterTabs /KeepAlive{outlet}/KeepAlive/KeepAliveScope);
};export default Layout;路由定义需要增加name属性
// router.ts
// 也可以是createHashRouter
import Layout form ./LayoutcreateBrowserRouter([{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 div123/div;
};其他API
mode 默认匹配路由pathpath变化则会新增一个tab也就是如果查询参数变化不会新增一个tab缓存组件如果希望查询参数变化也会新增一个tab需要将mode改为search nameKey如果路由name已被占用可以通过该字段获取handle下其他字段的信息作为tab的title
interface KeepAliveScopeProps {mode?: path | search;nameKey?: string;
}
KeepAliveScope modesearch nameKeytabName /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路由缓存的文章。
