React router cache route实现缓存页面流程介绍
作者：山鬼taro
一、背景
在开发中，从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的使用
就是把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
到此这篇关于React router cache route实现缓存页面流程介绍的文章就介绍到这了,更多相关React router cache route内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！