这篇文章主要介绍了react如何实现跳转前记住页面状态的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react如何实现跳转前记住页面状态文章都会有所收获，下面我们一起来看看吧。
react实现跳转前记住页面状态的方法：1、监听path变化，当path变化时更新lastPath和currentPath到redux store中；2、在离开页面A时，将页面状态保存到redux store中；3、如果redux store中的lastPath等于页面B的path，则认为A是由B返回还原状态，否则不还原。
React 页面返回保留上次状态
需求
设计
监听path变化，当path变化时更新lastPath和currentPath到redux store中；
进入页面A时，如果redux store中的lastPath等于页面B的path，则认为A是由B返回还原状态，否则不还原。
实现
项目采用react-router + dva库，实现部分会涉及相关技术。
监听path变化，通过history监听path变化，并记录lastPath和currentPath。这里采用dva的subscriptions，订阅history，当path变化同步path信息到state。
const model = {
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) {
return history.listen(({ pathName }: any) => {
dispatch({ type: "global/setPathName", pathName });
});
}
}
};
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如何实现跳转前记住页面状态”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程之家行业资讯频道。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
