这篇文章主要介绍了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”吧! 一、cookie简介首先,我们需要了解什么是cookie。c…