react缓存页面

最新推荐文章于 2025-03-20 16:44:11 发布

置顶 weixin_39946536

最新推荐文章于 2025-03-20 16:44:11 发布

阅读量2.4k

点赞数

文章标签： react缓存页面

本文链接：https://blog.youkuaiyun.com/weixin_39946536/article/details/102955072

版权

在React应用中，与Vue的keep-alive不同，我们可以利用react-router-dom来实现页面缓存。通过设置Route的exact属性为false，可以使得在进入子路径时父页面仍然保留。关键在于使用`componentWillReceiveProps`方法，比较当前路由与组件路径，若匹配则显示组件，否则隐藏。此方法中，可以调用组件实例的方法来激活或停用相关功能。对于使用了react-redux的模块，可以直接复用此方法，否则需要去除WrappedComponent部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写react中时总会跟vue对比，vue中有keep-alive做缓存页面，也有相应的api激活（activated）和停用（deactivated）。
react中我们用react-router-dom做路由时怎么缓存页面呢？

我想的是在Route中一个exact属性，当exact为false时下
< Route path="/login" component={A} />
< Route exact path="/login/:id" component={B} />
如果进入B页面时A页面也会显示，只要我页面在B页面时隐藏A页面，在返回A页面时在显示就可以了
重点就在componentWillReceiveProps函数中进行显示隐藏
import * as React from ‘react’;
import{ Route } from ‘react-router-dom’;

interface RoutesProps {
component:any,
path:any,
[random:string]:any
}

interface RoutesState {
[random: string]: any;
}
export default class Routes extends React.PureComponent<RoutesProps,RoutesState>{
constructor(props:any) {
super(props);
this.state={
isShow:true
}
}

componentWillReceiveProps(){
if(this.props.path == window.location.pathname){//对比路由
let myClass = this.props.component.WrappedComponent
let fun = new myClass(React)//获取模块
fun && fun.returnQuery && fun.returnQuery()//激活模块中查询函数（returnQuery可以自己命名）
this.setState({isShow:true})
}else{
this.setState({isShow:false})
}
}

render(){
return < div style={{display:this.state.isShow?‘block’:‘none’}}>
< Route {…this.props} />
</ div>

}
}
你的模块有使用react-redux可以直接使用复制使用，
没有的话就在componentWillReceiveProps中就去除WrappedComponent
componentWillReceiveProps(){
if(this.props.path == window.location.pathname){//对比路由
let myClass = this.props.component
let fun = new myClass(React)//获取模块
fun && fun.returnQuery && fun.returnQuery()//激活模块中查询函数（returnQuery可以自己命名）
this.setState({isShow:true})
}else{
this.setState({isShow:false})
}
}
这样就可以了