react如何实现跳转前记住页面状态

这篇文章主要介绍了react如何实现跳转前记住页面状态的相关知识，内容详细易懂，操作简单快捷，具免费云主机、域名有一定借鉴价值，相信大家阅读完这篇react如何实现跳转前记住页面状态文章都会有所收获，下面我们一起来看看吧。 react实现跳转前记住页面状态的方法：1、监听path变化，当path变化时更新lastPath和currentPath到redux store中；2、在离开页面A时，将页面状态保存到redux store中；3、如果redux store中的lastPath等于页面B的path，则认为A是由B返回还原状态，否则不还原。React 页面返回保留上次状态需求页面A跳转到页面B然后再返回页面A，页面A要还原离开前的状态；页面A和页面B有多个入口，从其它页面跳转到页面A，页面A不还原状态。设计监听path变化，当path变化时更新lastPath和currentPath到redux store中；离开页面A时，将页面状态保存到redux store中；进入页面A时，如果redux store中的lastPath等于页面B的path，则认为A是由B返回还原状态，否则不还原。实现项目采用react-router + dva库，实现部分会涉及相关技术。监听path变化，通过history监听path变化，并记录lastPath和currentPath。这里采用dva的subscriptions，订阅history，当path变化同步path信息到state。

constmodel={
namespace:"global",
state:{
pathName:{last:"",current:""},
},
reducers:{
setPathName(state:any,{pathName}:any){
state.pathName.last=state.pathName.current;
state.pathName.current=pathName;
},

effects:{
},
subscriptions:{
setup({history,dispatch}:any){
returnhistory.listen(({pathName}:any)=>{
dispatch({type:"global/setPathName",pathName});
});
}
}
};

页面卸载时同步状态到redux store，比如：

componentWillUnmount(){
const{dispatch}=this.props;
const{activeKey}=this.state;
dispatch({
type:"projectInfo/setProjectInfoPage",
payload:{activeKey}
});
}

页面重新加载时，比如：

state={
activeKey:pathToRegexp(PagePath.B).exec(pathName.last)?activeKey:""
};

pathToRegexp来自path-to-regexp库，用于路由匹配，此处用来判断上个页面是否为页面B。其它方案A页面是否由B页面返回的判断：B页面返回时添加state，history.push({ pathname: path, state: {from} });，进入A页面根据state判断是否由B页面返回。但当B有多个入口，返回时需要知道页面来源，否则无法返回，逻辑稍显复杂且容易出错。关于“react如何实现跳转前记住页面状态”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react如何实现跳转前记住页面状态”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: jquery跳转前如何设置cookie

这篇文章主要讲解了“jquery跳转前如何设置cookie”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery跳转前如何设置cookie”吧！ 一、cookie简介首先，我们需要了解什么是cookie。c…