react-router-cache-route 是路由缓存工具，通常在dva的首页app.js中一起搭配使用

但是需要注意的是，每一个route路由路径在定义的时候，都需要指定是否需要cache，如果使用copy大法，很容易忽略

这会导致一种后果，即从路由A点击跳转进入路由B，再由路由B点击返回路由A，最后再次点击跳转进入路由B，打印后会发现，路由B对应的组件没有被重新加载，这正是因为route.js中的配置，配置成了cache=true

import { Router, Route } from 'dva/router' import { CacheSwitch, CacheRoute } from 'react-router-cache-route' return ( <div className={styles.router} style={routerStyles}> <Router history={history}> <CacheSwitch> { routes.map(routeProps => { if (routeProps.cache) { return <CacheRoute saveScrollPosition cacheKey={routeProps.key} {...routeProps} /> } else { return <Route {...routeProps} key={routeProps.key} /> } })} </CacheSwitch> </Router> </div> )

 route.js

import Home from './pages/home' import LIST_Detail from './pages/home/ListDetail' import PersonInfo from './pages/home/PersonInfo' import PartyOrgList from './pages/home/PartyOrgList' import PartyPart from './pages/home/PartyPart' // 路由配置表 export default [ { key: 'HOME', path: '/', cache: true, exact: true, component: Home }, { key: 'LIST_Detail', path: '/list', cache: true, component: LIST_Detail }, { key: 'PersonInfo', path: '/personinfo', cache: true, component: PersonInfo }, { key: 'PartyOrgList', path: '/PartyOrgList', cache: false, component: PartyOrgList }, { key: 'PartyPart', path: '/PartyPart', cache: false, component: PartyPart }, ]

下面是一些CacheRoute的介绍，引用自其它博主

 

文章目录

CacheRoute遇到的问题原因 & 解决方案安装使用方法额外的生命周期

 

CacheRoute

github地址 搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能

注意：目前只在 路由前进时 进行缓存

React v16.3+ （兼容了 React v16.3 以下版本）

React-Router v4+

遇到的问题

使用 Route 时，路由对应的组件在前进或后退无法被缓存，导致了 数据和行为的丢失

例如：列表页滚动到底部后，点击跳转到详情页，返回后会回到列表页顶部，丢失了滚动位置和数据的记录

原因 & 解决方案

Route 中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 dom 树中删除

在阅读了 Route 的源码后我们发现可以将 children 当作方法来使用，以帮助我们手动控制渲染的行为

隐藏替代删除 可以解决遇到的问题

安装

npm install react-router-cache-route --save 1

使用方法

可以使用 CacheRoute 组件的 component， render， children 属性装载组件，或者

配合 Route 组件的 children 属性使用 cacheComponent 方法

注意：缓存语句不要写在 Switch 组件当中，因为 Switch 组件会卸载掉所有非匹配状态下的路由，需使用 CacheSwitch 替代 Switch

使用 when 属性决定何时使用缓存功能，可选值为 [forward, back, always] ，默认值为 forward

使用 className 属性给包裹组件添加自定义样式

也可以使用 behavior 属性来自定义缓存状态下组件的隐藏方式，工作方式是根据 CacheRoute 当前的缓存状态，返回一个作用于包裹组件的 props

import React from 'react' import { HashRouter as Router, Switch, Route } from 'react-router-dom' import CacheRoute, { CacheSwitch } from 'react-router-cache-route' import List from './components/List' import Item from './components/Item' import List2 from './components/List2' import Item2 from './components/Item2' const App = () => ( <Router> {/* 也可使用 render, children prop <CacheRoute exact path="/list" render={props => <List {...props} />} /> 或 <CacheRoute exact path="/list"> {props => <List {...props} />} </CacheRoute> 或 <CacheRoute exact path="/list"> <div> 支持多个子组件 </div> <List /> </CacheRoute> */} <CacheRoute exact path="/list" component={List} when="always" /> <Switch> <Route exact path="/item/:id" component={Item} /> </Switch> <CacheSwitch> <CacheRoute exact path="/list2" component={List2} className="custom-style" behavior={cached => (cached ? { style: { position: 'absolute', zIndex: -9999, opacity: 0, visibility: 'hidden', pointerEvents: 'none' }, className: '__CacheRoute__wrapper__cached' } : { className: '__CacheRoute__wrapper__uncached' })} /> <Route exact path="/item2/:id" component={Item2} /> <Route render={() => ( <div>404 未找到页面</div> )} /> </CacheSwitch> </Router> ) export default App

额外的生命周期

使用 CacheRoute 的组件将会得到一个名为 cacheLifecycles 的属性，里面包含两个额外生命周期的注入函数 didCache 和 didRecover，分别用在组件 被缓存 和 被恢复 时

import React, { Component } from 'react' export default class List extends Component { constructor(props, ...args) { super(props, ...args) props.cacheLifecycles.didCache(this.componentDidCache) props.cacheLifecycles.didRecover(this.componentDidRecover) } componentDidCache = () => { console.log('List cached') } componentDidRecover = () => { console.log('List recovered') } render() { return ( // ... ) } }