位置: 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)(今夕七夕)

  • 所得税费用科目属于什么科目
  • 个人买车交增值税吗
  • 个体工商户申报个税是按月按季度
  • 企业被环保关停政府赔偿
  • 以前年度多计收入多交税怎么处理
  • 投资者减除费用和工资薪金减除费用
  • 注销有几种方法
  • 政府预算年度
  • 广告公司个体户自己可以开发票
  • 季度利润表格式
  • 异地劳务分包要外经证吗
  • 房地产企业增值税纳税义务发生时间
  • 进口代收业务
  • 应付职工薪酬如何填列
  • 公司实行注册资本认缴制
  • 报废车辆残值收入交多少增值税
  • 企业注销递延所得税资产怎么处理
  • 已付款未收到发票怎么做分录
  • 员工离职 社保
  • 营改增后装修行业税率
  • 营改增后,企业购进自用小轿车增值税
  • 企业恢复生产经营方案
  • 财产租赁所得适用什么税率
  • 建设工程施工包括哪些工程
  • 个体户需不需要银行开户
  • 集团公司收购子公司
  • 增值税发票压线能用吗
  • 查账征收改为核定征收需要什么资料
  • linux系统怎么安装网卡驱动
  • 鸿蒙系统怎么开发
  • 个人所得税如何办理退税
  • 事业单位基建账并入大账规定
  • mac清理所有数据
  • php字符串赋值
  • php b/s
  • macOS Big Sur 11.2 公测版 beta 1怎么更新?
  • 谷歌浏览器历史记录插件
  • 中拍网拍卖
  • 现金支付医保报销
  • 德比郡在哪
  • 错误解决方法
  • python怎么安装lxml库
  • php7 数组
  • mysql水平拆分实现
  • 员工辞退补偿金扣个税吗
  • 金蝶软件如何输入红字
  • php屏蔽ip
  • 增值税报完了能改么
  • 已经认证抵扣的发票怎么红冲
  • 固定资产加速折旧的方法有哪些
  • 什么是公司财务管理中的一个重要组成部分
  • 房地产购买流程
  • 为什么小规模纳税人少
  • 资产基金账务处理
  • 其他应收款收不回来怎么写情况说明
  • 股权支付会计处理
  • 土地无形资产摊销的会计处理方法
  • 建筑业外包工程包括哪些
  • 哪些行业可以开收购发票
  • 制造费用影响什么
  • 本年利润的会计科目
  • 投资收益怎么做帐
  • 一般纳税人先确认收入吗
  • 企业为什么要设置仓库
  • 编制记账凭证的依据
  • 如何系统还原xp
  • winxp启动
  • win10的qq
  • Ubuntu 14.04 LTS中安装fcitx中文输入法的教程
  • 麒麟Linux系统怎么进入图形化界面
  • jquery实现简洁文件上传表单样式
  • linux防火墙开启80端口视频
  • lru缓存机制是什么
  • javascript取随机数
  • 有几种导航
  • 《JavaScript高级程序设计》pdf链接
  • 四川增值税发票真伪查询
  • 登录""增值税发票选择确认平台""时提示""打开设备
  • 社保在税务系统交,有何用意
  • 结售汇选择汇还是钞好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设