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页面的数据查询。这样,即使页面发生跳转,也能够持久化并展示出页面间传递的数据。

相关推荐
摸鱼仙人~40 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图