开源一个react路由缓存库
Github仓库
背景
- 产品希望可以像浏览器那样每打开一个路由,会多一个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路由缓存的文章。
相关文章:
开源一个react路由缓存库
Github仓库 背景 产品希望可以像浏览器那样每打开一个路由,会多一个tab,用户可以切换tab访问之前加载过的页面,且不会重新加载。真就产品一句话…… Github上有轮子了吗 Github上开箱即用的轮子是基于react-router-dom V5实现的ÿ…...

go-kratos 学习笔记(7) 服务发现服务间通信grpc调用
服务发现 Registry 接口分为两个,Registrar 为实例注册和反注册,Discovery 为服务实例列表获取 创建一个 Discoverer 服务间的通信使用的grpc,放到data层,实现的是从uses服务调用orders服务 app/users/internal/data.go 加入 New…...

SPSS个人版是什么软件
SPSS是一款数据统计、分析软件,它由IBM公司出品,这款软件平台提供了文本分析、大量的机器学习算法、数据分析模型、高级统计分析功能等,软件易学且功能非常强大,可以使用SPSS制作图表,例如柱状、饼状、折线等图表&…...

Minos 多主机分布式 docker-compose 集群部署
参考 docker-compose搭建多主机分布式minio - 会bk的鱼 - 博客园 (cnblogs.com) 【运维】docker-compose安装minio集群-CSDN博客 Minio 是个基于 Golang 编写的开源对象存储套件,虽然轻量,却拥有着不错的性能 中文地址:MinIO | 用于AI的S3 …...

Unity + Hybridclr + Addressable + 微信小程序 热更新报错
报错时机: Generate All 怎么All 死活就是报错 生成微信小程序,并启动后 报错内容: MissingMethodException:AoT generic method notinstantiated in aot.assembly:Unity.ResourceManager:dll, 原因: Hybridclr 开发文档 解…...

鸿蒙开发—黑马云音乐之Music页面
目录 1.外层容器效果 2.信息区-发光效果 3.信息区-内容布局 4.播放列表布局 5.播放列表动态化 6.模拟器运行并配置权限 效果: 1.外层容器效果 Entry Component export struct MuiscPage {build() {Column() {// 信息区域Column() {}.width(100%)// .backgroun…...

IsaacLab | 如何在Manipulation任务中添加新的目标(target)
如是我闻: 终于让我给摸索出来了,在这里描述一下问题场景。 假使说我们有一个机械臂操作的任务,这样婶的 Isaac Lab | Push 我们想做多目标的任务,这时候需要向环境中添加第二个目标,像这样 Isaac Lab | Add target 那…...

【Python从入门到进阶】61、Pandas中DataFrame对象的操作(二)
接上篇《60、Pandas中DataFrame对象的操作(一)》 上一篇我们讲解了DataFrame对象的简介、基本操作及数据清洗相关的内容。本篇我们来继续讲解DataFrame对象的统计分析、可视化以及数据导出与保存相关内容。 一、DataFrame的统计分析 在数据分析和处理中…...

Linux(虚拟机)的介绍
Linux介绍 常见的操作系统 Windows:微软公司开发的一款桌面操作系统(闭源系统)。版本有dos,win98,win NT,win XP , win7, win vista. win8, win10,win11。服务器操作系统:winserve…...

CSS(九)——CSS 轮廓(outline)
CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。 让我们用一个图来看…...
Unity Timeline:构建复杂动画序列的利器
Unity的Timeline是一个强大的动画工具,它允许开发者创建复杂的动画序列,将动画、音频和事件整合到一个统一的时间轴上。Timeline的可视化编辑界面使得动画制作变得更加直观和灵活。本文将介绍Unity Timeline的基本概念、功能以及如何使用它来实现动画。 …...

C# 与C++ cli
cli CLI(Command Line Interface)是一种通过命令行界面与计算机系统进行交互的方式。它提供了一种以文本形式输入命令和接收系统输出的方法,用于执行各种操作和管理计算机系统。以下是CLI的详细解释: 一、定义与基本概念 定义&…...

Linux文件编程--打开及创建
...
Vue3点击按钮实现跳转页面并携带参数
前提:有完整的路由规则 1.源页面 <template><div><h1>源页面</h1><!--通过js代码跳转--><template #default"scope"><button click"toTargetView(scope.row)">点击跳转携带参数</button><…...

探索Linux-1-虚拟机远程登陆XShell6远程传输文件Xftp6
Linux是什么? Linux是一个开源的操作系统内核,由林纳斯托瓦兹(Linus Torvalds)于1991年首次发布。它基于Unix操作系统,但提供了更多的自由和灵活性。Linux内核是操作系统的核心部分,负责管理系统资源、处理…...

SpringBoot中使用监听器
1.定义一个事件 /*** 定义事件* author hrui* date 2024/7/25 12:46*/ public class CustomEvent extends ApplicationEvent {private String message;public CustomEvent(Object source, String message) {super(source);this.message message;}public String getMessage() …...
mybatise全接触-面试宝典-知识大全
1 . 简述什么是Mybatis和原理 ? Mybatis工作原理: (1)Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,加载驱动、创建连接、创建statement等繁杂的过程,开发者…...

Catalyst优化器:让你的Spark SQL查询提速10倍
目录 1 逻辑优化阶段 2.1 逻辑计划解析 2.2 逻辑计划优化 2.2.1 Catalys的优化过程 2.2.2 Cache Manager优化 2 物理优化阶段 2.1 优化 Spark Plan 2.1.1 Catalyst 的 Join 策略 2.1.2 如何决定选择哪一种 Join 策略 2.2 Physical Plan 2.2.1 EnsureRequirements 规则 3 相关文…...

【Hot100】LeetCode—416. 分割等和子集
目录 题目1- 思路2- 实现⭐152. 乘积最大子数组——题解思路 3- ACM 实现 题目 原题连接:416. 分割等和子集 1- 思路 理解为背包问题 思路: 能否将均分的子集理解为一个背包,比如对于 [1,5,11,5],判断能否凑齐背包为 11 的容量…...

前端开发知识-vue
大括号里边放键值对,即是一个对象。 一、vue可以简化前端javascript的操作。 主要特点是可以实现视图、数据的双向绑定。 使用vue主要分为三个步骤: 1.javascript中引入vue.js 可以src中可以是vue的网址,也可以是本地下载。 2.在javasc…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...

基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...

算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》
🧠 LangChain 中 TextSplitter 的使用详解:从基础到进阶(附代码) 一、前言 在处理大规模文本数据时,特别是在构建知识库或进行大模型训练与推理时,文本切分(Text Splitting) 是一个…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”
案例: 某医药分销企业,主要经营各类药品的批发与零售。由于药品的特殊性,效期管理至关重要,但该企业一直面临效期问题的困扰。在未使用WMS系统之前,其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...