react跳轉前記住頁面狀態怎麼實現

react實現跳轉前記住頁面狀態的方法：1、監聽path變化，當path變化時更新lastPath和currentPath到redux store中；2、離開頁面A時，將頁面狀態保存到redux store中；3.如果redux store中的lastPath等於頁面B的path，則認為A是由B傳回還原狀態，否則不還原。

本教學操作環境：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中文網其他相關文章！