本文主要是介绍react-antd中使用umi的Link路由组件跳转页面时如何传参？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在使用Link组件跳转页面时有两种页面跳转，分别为：
1、在当前标签页页面跳转
2、跳转到新的标签页
一、在当前标签页中路由跳转
代码如下：
const { voucherType,organizationId } = record;
<Link to={{pathname:'/voucher/voucherSummary/voucherSummaryDetail', query:{voucherType,organizationId}}}>查看</Link>
如何获取query中的传值，在这里需要用到location，location下面会带有query对象，里面就是传过来的值：
const {location:{query:{ voucherType,organizationId }}
} = this.props;
第一种形式直接使用Link组件的to属性，pathname的值就是在router.config.js中定义的要跳转页面的路由，比如我的router.config.js中定义的路由为：
{path: '/voucher/voucherSummary/voucherSummaryDetail', //调用此处的路径，就会自动调用component属性下的组件中name: 'voucherSummaryDetail',hideInMenu: true,component: './Voucher/VoucherSummary/VoucherSummaryDetail', //组件
},
二、跳转到新的标签页
与第一种不同的是，这时我们传参不用query属性，而是需要使用url地址传参，就像get的请求方式，因为这样才能将参数带到新的标签页中：
const { voucherType, organizationId, actionId } = record;
<Link to={`/voucher/voucherSummary/voucherSummaryDetail?voucherType=${voucherType}&organizationId=${organizationId}&actionId=${actionId} `} target='_blank'>查看</Link>
取值方式与第一种传参取值方式相同：
const {location:{query:{ voucherType,organizationId }}
} = this.props;
跳转之前的url（路径末尾的 /list 为重定向时定义的值,请忽略不计）：
跳转到新页面的url：
在项目中常用的路由传值就是以上两种方式了，我相信路由传值方式不止以上两种，若大家使用的是其他的传值方式可以留言，我也去研究研究，共勉。
这篇关于react-antd中使用umi的Link路由组件跳转页面时如何传参？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
