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。

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

关于 "react怎么实现跳转前记住页面状态" 就介绍到此。希望多多支持编程宝库。

es6新特性怎么使用：本文讲解"es6新特性如何使用"，希望能够解决相关问题。es6新特性有：1、let和const；2、symbol；3、模板字符串；4、解构表达式；5、对象方面，如Map和Set；6、函数方面，如参数默认值和箭头函数；7 ...