本教程操作环境：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中文网其它相关文章！
