react跳转前记住页面状态怎么实现

藏色散人
发布: 2023-01-06 14:31:10
原创
2308 人浏览过

react实现跳转前记住页面状态的方法:1、监听path变化,当path变化时更新lastPath和currentPath到redux store中;2、在离开页面A时,将页面状态保存到redux store中;3、如果redux store中的lastPath等于页面B的path,则认为A是由B返回还原状态,否则不还原。

react跳转前记住页面状态怎么实现

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react跳转前记住页面状态怎么实现?

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。

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 });
      });
    }
  }
};
登录后复制

页面卸载时同步状态到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有多个入口,返回时需要知道页面来源,否则无法返回,逻辑稍显复杂且容易出错。

总结

本文提出了一种页面返回保留上次状态的解决方案,适用于页面有多个入口和出口的情况。该方案中采用了监听history变化的方式,记录上次页面地址,从而给是否还原状态提供了依据。

推荐学习:《react视频教程

以上是react跳转前记住页面状态怎么实现的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!