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