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。

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如何實現跳轉前記住頁面狀態”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react如何實現跳轉前記住頁面狀態”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。