這篇文章主要介紹了react如何實現(xiàn)跳轉前記住頁面狀態(tài)的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react如何實現(xiàn)跳轉前記住頁面狀態(tài)文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)主營景谷網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,APP應用開發(fā),景谷h5小程序開發(fā)搭建,景谷網(wǎng)站營銷推廣歡迎景谷等地區(qū)企業(yè)咨詢

react實現(xiàn)跳轉前記住頁面狀態(tài)的方法：1、監(jiān)聽path變化，當path變化時更新lastPath和currentPath到redux store中；2、在離開頁面A時，將頁面狀態(tài)保存到redux store中；3、如果redux store中的lastPath等于頁面B的path，則認為A是由B返回還原狀態(tài)，否則不還原。

React 頁面返回保留上次狀態(tài)

需求

• 頁面A跳轉到頁面B然后再返回頁面A，頁面A要還原離開前的狀態(tài)；

• 頁面A和頁面B有多個入口，從其它頁面跳轉到頁面A，頁面A不還原狀態(tài)。

設計

• 監(jiān)聽path變化，當path變化時更新lastPath和currentPath到redux store中；

• 離開頁面A時，將頁面狀態(tài)保存到redux store中；

• 進入頁面A時，如果redux store中的lastPath等于頁面B的path，則認為A是由B返回還原狀態(tài)，否則不還原。

實現(xiàn)

項目采用react-router + dva庫，實現(xiàn)部分會涉及相關技術。

監(jiān)聽path變化，通過history監(jiān)聽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 });
      });
    }
  }
};

頁面卸載時同步狀態(tài)到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頁面根據(jù)state判斷是否由B頁面返回。但當B有多個入口，返回時需要知道頁面來源，否則無法返回，邏輯稍顯復雜且容易出錯。

關于“react如何實現(xiàn)跳轉前記住頁面狀態(tài)”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react如何實現(xiàn)跳轉前記住頁面狀態(tài)”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。