在React中如何使用history.push传递参数主要有三种方式:
第一种如下:
this.props.history.push{undefined
pathname:'/router/url/send',
query:{
'oneFlag':one,
}
}
接收情况如下:
this.props.location.query.oneFlag
其路由路径显示:
'#/router/url/send?oneFlag=one'
第二种情况如下:
this.props.history.push{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 删除。