在React中如何使用history.push传递参数
原创在React中如何使用history.push传递参数
原创
挥刀北上
发布于 2021-12-19 15:12:57
发布于 2021-12-19 15:12:57
在React中如何使用history.push传递参数主要有三种方式：
第一种如下：
this.props.history.push{?developer/article/1921510/undefined
pathname:'/router/url/send',
query:{
'oneFlag':one,
}
}接收情况如下：
this.props.location.query.oneFlag其路由路径显示：
'#/router/url/send?oneFlag=one'第二种情况如下：
this.props.history.push{?developer/article/1921510/undefined
pathname:'/router/url/send',
state:{
'oneFlag':one,
}
}接收情况如下：
this.props.location.state.oneFlag // one其路由显示:
'#/router/url/send'第三种情况需要在配置路由时，将路由配置为rest格式路由，
{
path: '/device/detail/:id',
component: DeviceDetail,
pageConfig: {
title: '设备详情',
auth: ['admin'],
},
},传递参数时：
<Button text type="primary" onClick={() => history.push({ pathname: `/device/detail/${record.id}` })}>
详情
</Button>参数接收时：
const { id } = props.match.params;第一种和第三种，在目标路由刷新后，参数还可以取到，但是第二种页面刷新后，参数就取不到了，第二种适合开发winform类的应用。
第一种和三种在使用时要注意监听参数的变化，不然路由回退，再次进图另外参数的页面，组件不会重新渲染，用hook组件开发的话，需要用useEffect来监听参数变化。
以上便是react路由传递参数的三种方式，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读