react+umi页面间传递数据（history.push）

sheep_yyx

已于 2022-07-22 09:23:00 修改

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： react.js javascript 前端

于 2022-07-11 16:38:15 首次发布

本文链接：https://blog.youkuaiyun.com/sheep_yyx/article/details/125723611

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在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
}；