react页面跳转时携带参数,返回时能展示跳转之前的数据

在React中实现页面间的参数传递和数据持久化,可以使用react-router-dom库中的useHistory和useLocation钩子。

javascript 复制代码
import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { Button } from 'antd';

// 页面A,跳转到页面B并传递参数
const PageA = () => {
  const history = useHistory();
  const { state } = useLocation(); // 这个state为保留操作记录的钩子 
  // 查询条件1 设置默认值state.params.paramA与getDatas()触发条件(params)一致 保证不会触发重复请求
  const [paramA, setParamA] = useState((state && state.params.paramA) || '');
  // 查询条件2 设置默认值state.params.paramA与getDatas()触发条件(params)一致 保证不会触发重复请求
  const [paramB, setParamB] = useState((state && state.params.paramB) || '');
  // 跳转到详情页时要保存的当前页的查询条件
  const [params, setParams] = useState((state && state.params) || null);

  // PageA查询数据
  useEffect(() => {
    getDatas();
  }, [params]);

  const getDatas = () => {
    getList({
      paramA,
      paramB,
    }).then(res => {
      // todo

    }).catch((err) => {
      console.log(err);
    });
  };

  const goToPageB = () => {
    history.push('/page-b', { state: { params } });
  };

  return (
    <div>
      <button onClick={goToPageB}>跳转到页面B</button>
    </div>
  );
};

// 页面B,获取参数并显示
const PageB = () => {
  const { state } = useLocation();

  return (
    <div>
      <p>传递的数据:{location.state ? location.state.params : '无数据'}</p>
      <Button type="primary" onClick={() => history.push({ pathname: '/page-a', state, })}>返回</Button>
    </div>
  );
};

export default PageA;

当从PageA跳转到PageB时,使用history.push方法并以第二个参数的形式传递了一个状态对象。在PageB中,通过useLocation钩子获取到了包含状态的location对象,并从中提取了传递的数据。从PageB返回pageA时,使用history.push方法再将pageA页面的参数返回,作为useEffect依赖项触发pageA页面的数据查询。这样,即使页面发生跳转,也能够持久化并展示出页面间传递的数据。

相关推荐
凌辰揽月22 分钟前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端2 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴3 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端3 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧3 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er3 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶3 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李4 小时前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚4 小时前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化