react利用react-activation实现子路由缓存

1.下载依赖

yarn add react-activation

2.父路由里的代码

import React, { FunctionComponent,cloneElement } from 'react'
import Styles from './layout.less'
import { IRouteComponentProps } from 'umi'
import { Switch, Route } from 'react-router';
import KeepAlive, { AliveScope } from 'react-activation'// 需要缓存的路由
const KEEP_ALIVE_ROUTES = ['/reactaction/rca'
]const ReactAction: FunctionComponent<IRouteComponentProps> = ({ children, history, location }) => {return (<div className={Styles.layout}><div className={Styles.layout_page}><AliveScope><Switch location={location}>{children.props.children.map((route: any) => {return KEEP_ALIVE_ROUTES.includes(route.props.path) ?<Route key={route.props.path} path={route.props.path} render={() =><KeepAlive saveScrollPosition={`screen`}>{children}</KeepAlive>}></Route> :cloneElement(route, { key: route.props.path })})}</Switch></AliveScope></div><div className={Styles.layout_bar}><button onClick={() => history.push('/reactaction/rca')}>缓存页面</button><button onClick={() => history.push('/reactaction/rcb')}>非缓存页面1</button><button onClick={() => history.push('/reactaction/rcc')}>非缓存页面2</button></div></div>)
}export default ReactAction

react利用react-activation实现子路由缓存相关推荐

react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
refract推导_我们如何利用Refract来利用React式编程的力量
refract推导 by Joe McGrath 通过乔麦克格拉斯我们如何利用Refract来利用React式编程的力量 (How we harnessed the power of reactiv ...
React组件开发流程——利用React构建简单的可检索产品数据表
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/54755521 ...
php课程banner,如何利用react 实现banner轮播效果
最近在看react , jsx的语法一开始看起来确实不习惯,但是确实比较灵活运行效果: import React from 'react'; // import ShadowDOM from 're ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
【React】React 详细教程
前言 1.react与vue的对比 1.1.什么是模块化是从代码的角度来进行分析的把一些可复用的代码抽离为单独的模块:便于项目的维护和开发 1.2.什么是组件化是从UI界面角度来进行分析的把一 ...
【尚硅谷React】——React全家桶笔记
文章目录第1章 React简介 1.1 React的特点 1.2 引入文件 1.3 JSX 1.3.1 为什么要用JSX 1.3.2 JSX语法规则 1.4 虚拟DOM 1.5 模块与组件 1.5. ...
如何使用 React 和 React Hooks 创建一个天气应用
大家好,我是若川(点这里加我微信 ruochuan12,长期交流学习).今天推荐一个练手的React项目,创建天气应用,相信很快能看完.昨天发送书掉粉18人,是我没想到的,送书一般是出版社按阅读量赞助 ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
用于React，React Native，JavaScript和生产力的顶级VSCode扩展
I've used VSCode full-time since 2016. Before I was using Visual Studio and I was looking for lighte ...

react利用react-activation实现子路由缓存

react利用react-activation实现子路由缓存相关推荐

最新文章

热门文章