• 技术文章 >web前端 >前端问答

    react跳转前记住页面状态怎么实现

    藏色散人藏色散人2023-01-06 14:31:10原创80

    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 页面返回保留上次状态

    需求

    设计

    实现

    项目采用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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:跳转 React
    上一篇:react不显示PDF生成信息怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react native路由跳转怎么实现• react的setstate什么时候同步• react路由页面不刷新怎么办• webstorm react 报错怎么办• react refs怎么修改dom
    1/1

    PHP中文网