react+umi页面间传递数据(history.push)

本文介绍了如何在React中使用自定义hook `useQuery`解析URL查询参数,并在父子组件间传递数据。通过`useLocation`和`queryString`模块,展示了一个按钮点击后跳转并动态传递参数的例子。同时,展示了如何在子组件中导入并使用这个hook以接收和处理查询参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.使用自定义hook---useQuery

路径: src\hooks\useQuery\index.ts 

import { useMemo } from 'react';
import { useLocation } from 'umi';
import queryString from 'query-string';

const useQuery = <T>() => {
  const { search } = useLocation();
  const query = useMemo(() => queryString.parse(search) as unknown as T, [search]);
  return query;
};

export default useQuery;

注意文件是ts不是tsx.

2.以button点击跳转举例,在父页面中代码如下

  <Button  onClick={() => { history.push(`/?groupId=${yyx}&groupName=${123}`); }}>
        <span >开始比赛</span>
  </Button>

/ 代表路由

插入“?”避免报错

两个参数之间用“&”链接

yyx是提前定义的变量

3.不要忘记import

import { Button } from 'antd';
import React from "react";
import { history } from 'umi';

4.在子页面中接收数据

//引入自定义的hook
import useQuery from '@/hooks/useQuery';

//写TS接口
interface GroupIdQuery{
  groupId:string;
  groupName:number;
}

//在组件中使用
const ChildWindow: FC = (props) => {
  const query = useQuery<GroupIdQuery>();
  console.log(query)
  console.log(query.groupId)

    //省略return
};

5.控制台中输出如下

 -------------------------------------

尊敬的开发者,您好!我是一名初入职场的小小程序员,从事软件开发工作,定期发一些文章来记录自己的学习过程,并分享问题的解决方法。

如果样例代码和文章描述有哪些问题,或者有相关领域想一起讨论,欢迎私信交流。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值