<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react跳轉前記住頁面狀態怎么實現-環球訊息

          來源:php中文網 | 2023-01-06 13:59:09 |

          本教程操作環境: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中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>