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中文網其他相關文章！
