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.控制台中输出如下
-------------------------------------
尊敬的开发者,您好!我是一名初入职场的小小程序员,从事软件开发工作,定期发一些文章来记录自己的学习过程,并分享问题的解决方法。
如果样例代码和文章描述有哪些问题,或者有相关领域想一起讨论,欢迎私信交流。