位置: IT常识 - 正文

React中使用react-router-cache-route缓存页面状态(react-use)

编辑:rootadmin
React中使用react-router-cache-route缓存页面状态 一、背景

推荐整理分享React中使用react-router-cache-route缓存页面状态(react-use),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react current,react ir,react_,react_,react_,react it,react-use,react_,内容如对您有帮助,希望把文章链接给更多的朋友!

在开发中,从A页面跳转到other页面,再返回A页面时react-router会直接刷新页面,导致A页面中已加载的海量数据状态丢失,需要重新加载,用户体验不佳,所以必须将海量数据状态进行缓存。 (在小编的实际场景中,A页面是一堆模型&业务数据标注点,由于模型永远不会更改,但是加载又很缓慢,因此,希望从other页面返回A页面时,模型不会重新加载,但是需要更新业务数据。) (其他应用场景举例:开发中有从详情页返回列表页的需求,这样一来页面返回后使用react-router会直接刷新页面,导致页面中的分页和搜索条件全部丢失,用户体验不佳,所以就必须将列表页的状态进行缓存。)

二、参考方法

网上搜索大概有几种方法: 1、使用localStorage/sessionStorage进行页面的状态的保存,跳转页面后再进行获取,这种方法虽然可行,但是从根本来说还是从新向后台再一次请求了数据,不算最佳方案。 2、react-activation,尝试未果 3、react-kepper,需要将项目的react-router替换掉,风险较大,慎用 4、react-router-cache-route,简单易用,最佳方案

三、react-router-cache-route的使用React中使用react-router-cache-route缓存页面状态(react-use)

就是把Switch替换成CacheSwitch,因为因为Switch组件只保留第一个匹配状态的路由,卸载掉其他路由 把Route替换成CacheRoute 注意:other面回退A页面时使用this.props.history.push(‘’路径’)可以实现页面的缓存 但当使用this.props.history.go(-1)则缓存失败

四、具体步骤

1、替换Switch和Route 静态路由

import React,{Component} from 'react'import { Route} from 'react-router-dom'import {CacheRoute,CacheSwitch} from 'react-router-cache-route'import PageA from './demo/PageA.js'import PageB from './demo/PageB.js'import PageOther from './demo/PageOther.js'class App extends Component{ render(){ return( <div className='App'> <CacheSwitch> <CacheRoute exact path='/platform/PageA' component={PageA}/> <Route path='/platform/PageB' component={PageB}/> <Route path='/platform/PageOther' component={PageOther}/> </CacheSwitch> </div> ) }}export default App;

动态路由

function AppRouter() { return ( <Router history={history}> <AppContainer> <CustomHeader /> <CacheSwitch> {routes.map((route: RouteType, index: number) => { return route.cache ? ( <CacheRoute exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ) : ( <Route // strict={true} exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ); })} <Redirect to="/login" /> </CacheSwitch> </AppContainer> </Router> );}

动态理由,加判断标志位:cache,只有传递了cache页面才能被缓存,没有传递cache,就用普通路由形式

{ path: '/PageA', component: PageA, cache:true,//判断标志位},{ path: '/PageB', component: PageB,},

2、如何更新其他想要更新的业务数据

//缓存A页面跳转至other页面()componentDidCache = () => { console.log('List cached')}//缓存恢复(从other页面跳转返回A页面)componentDidRecover = () => { // 这里可以更新业务数据 console.log('List recovered')}

3、参考 https://github.com/CJY0208/react-router-cache-route/blob/HEAD/README_CN.md

本文链接地址:https://www.jiuchutong.com/zhishi/288875.html 转载请保留说明!

上一篇:Dos Ojos自然公园里El Pit Cenote的潜水员,墨西哥金塔纳罗奥 (© Christia Vizl/Tandem Stills + Motion)(自然公园在哪)

下一篇:【今日七夕】 (© Martin Hale/Minden Pictures)(今夕七夕)

  • vivo拦截短信在哪(vivo手机拦截短信在哪里设置)

    vivo拦截短信在哪(vivo手机拦截短信在哪里设置)

  • 苹果xr支持人脸支付吗(苹果xr支持人脸解锁吗)

    苹果xr支持人脸支付吗(苹果xr支持人脸解锁吗)

  • 买家怎么能拉黑店铺吗(买家怎么拉黑店铺客服)

    买家怎么能拉黑店铺吗(买家怎么拉黑店铺客服)

  • s10 拍照放大模糊(拍照放大功能)

    s10 拍照放大模糊(拍照放大功能)

  • se2跟苹果8一样吗(se2是不是和苹果8一样)

    se2跟苹果8一样吗(se2是不是和苹果8一样)

  • 收款码给别人有风险吗(收款码给别人有关系吗)

    收款码给别人有风险吗(收款码给别人有关系吗)

  • 苹果11每次下载东西需要密码怎么设置(苹果每次下载app要输密码怎么取消)

    苹果11每次下载东西需要密码怎么设置(苹果每次下载app要输密码怎么取消)

  • 华为mate30怎么开通语音控制(华为mate30怎么开小窗)

    华为mate30怎么开通语音控制(华为mate30怎么开小窗)

  • 苹果死机无法强制关机(苹果死机无法强制开机)

    苹果死机无法强制关机(苹果死机无法强制开机)

  • 腾讯课堂为啥看不了回放(腾讯课堂为啥看不到别人的屏幕共享)

    腾讯课堂为啥看不了回放(腾讯课堂为啥看不到别人的屏幕共享)

  • 以太网可以上网吗(以太网可以上网的路由器)

    以太网可以上网吗(以太网可以上网的路由器)

  • 一个手机可以登几个微信(一个手机可以登录三个微信号吗)

    一个手机可以登几个微信(一个手机可以登录三个微信号吗)

  • 苹果官网退货签收验货要多久(苹果官网退货签收了,订单状态怎么没更新)

    苹果官网退货签收验货要多久(苹果官网退货签收了,订单状态怎么没更新)

  • 苹果13.3系统耗电快怎么办(苹果13系统费电吗)

    苹果13.3系统耗电快怎么办(苹果13系统费电吗)

  • 微视提现了为什么没有到账(微视提现后就没红包了)

    微视提现了为什么没有到账(微视提现后就没红包了)

  • 如何在微信中举报他人(如何在微信中举报)

    如何在微信中举报他人(如何在微信中举报)

  • 华为还原所有设置是什么意思(华为还原所有设置照片还有吗)

    华为还原所有设置是什么意思(华为还原所有设置照片还有吗)

  • 荣耀20和20s的区别(荣耀20和20S的区别)

    荣耀20和20s的区别(荣耀20和20S的区别)

  • 魅族16sPro怎么设置时间(魅族16spro怎么设置动态壁纸)

    魅族16sPro怎么设置时间(魅族16spro怎么设置动态壁纸)

  • 拼多多免拼卡在哪看(拼多多免拼卡在哪里看怎么使用)

    拼多多免拼卡在哪看(拼多多免拼卡在哪里看怎么使用)

  • 如何在公众号直接发h5(如何在公众号直播)

    如何在公众号直接发h5(如何在公众号直播)

  • vivox21nfc在哪打开(vivox27nfc功能)

    vivox21nfc在哪打开(vivox27nfc功能)

  • 新浪微博怎么注销超话(新浪微博怎么注册新账号)

    新浪微博怎么注销超话(新浪微博怎么注册新账号)

  • 魅蓝s6值得入手吗(魅蓝s62021)

    魅蓝s6值得入手吗(魅蓝s62021)

  • 刷宝视频怎么发布视频(在刷宝发布视频有收益吗)

    刷宝视频怎么发布视频(在刷宝发布视频有收益吗)

  • 【uniapp】 的事件处理详解(uniapp实战)

    【uniapp】 的事件处理详解(uniapp实战)

  • phpcms要钱吗(phpcms视频教程)

    phpcms要钱吗(phpcms视频教程)

  • 金税盘如何交服务费
  • 到期一次还本付息的债券投资摊余成本
  • 无偿划拨资产的入账价值
  • 银行承兑汇票手续费是多少
  • 集资款利息走什么科目
  • 未加盖发票专用章的发票是不合规
  • 收资料费怎么入账科目
  • 预估入账的收入是什么
  • 通用机打发票操作流程
  • 白酒的消费税怎样计算
  • 处于汇总期
  • 采用审计软件有什么优缺点
  • 企业不合规发票责令补开处理
  • 卷烟消费税税率表
  • 个人投资者
  • 企业购进固定资产进项税如何抵扣
  • 事业单位是否需要章程
  • 苹果手机miracast在哪里找到
  • 发出委托加工物资
  • 腾讯电脑管家中蓝牙在哪
  • PHP:pg_lo_truncate()的用法_PostgreSQL函数
  • 苹果推送最新系统怎么关
  • 公司报销医疗费用公司医保里面的钱也报吗
  • php md5加盐
  • 一个金税盘可以用一个用户名和密码开票吗
  • 年终奖的发放明目
  • 办公室装修款怎么做账
  • nlp自然语言处理框架
  • 增值税纳税申报操作流程
  • python迭代器iterator
  • 对公银行卡账户
  • 利润表中利息费用为负数是什么意思
  • 应收账款项目的金额公式
  • 固定资产出租收入属于
  • 织梦建站详细步骤
  • 摄影行业开票
  • 如何拉企业纳税申报表
  • 投资性房地产出售收入属于什么收入
  • 制造费用期末要结转吗
  • 个人所得税手续费返还账务处理
  • 农民专业合作社法
  • 计提坏账准备资产总额会减少吗
  • 会计账簿登记错误
  • 已抵扣认证的发票开红字发票需要将原票退回吗
  • 银行承兑到期之前怎么办
  • 收到银行承兑汇票后,如何取钱
  • 小规模开具的1%专票 一般纳税人抵扣
  • 非流动资产包括哪些会计科目
  • 组织机构代码证和统一社会信用代码的关系
  • 国有资产无偿划转协议
  • 购买软件会计科目
  • 残保金是交上一年的吗
  • 本年利润净利润的关系
  • 建账的基本原则是什么
  • sql切割字段
  • 硬盘 bios
  • mac修改dns设置
  • ubuntu命令行调节音量
  • osx安装win10
  • win8系统怎么关机
  • win7登录不进去
  • linux命令行在哪
  • android@localhost#1
  • Lesson02_05 头元素
  • Javascript selection的兼容性写法介绍
  • 微软早在1985年便首次使用了安卓上饱受争议的汉堡按钮
  • 文件夹如何取名字
  • unityab包
  • nodejs 写文件
  • android socket聊天
  • javascript书写基本规范
  • 创建android项目
  • 陕西省税务局电子税务局官网
  • 所得税汇总纳税分配表
  • 免税饲料发票怎么开具
  • 民办非企业税务登记流程
  • 京东开的店
  • 陕西省网上税务局怎么报国税(陕西税务局官网申报)
  • 增值税专用发票提高限额
  • 混凝土税率是多少2021
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设