React路由传参刷新参数不丢失

一、路由跳转

1、search方式(推荐)

也就是url方式,使用qs库将对象转化为url参数方式

this.props.history.push({
  pathname: `/Apply`,
   search: qs.stringify({id:1, type:'edit'}),
 });

获取参数

const { id } = qs.parse(this.props.location.search)

2、params方式

参数不丢失但是需要一个个手动定义

this.props.history.push({pathname:`/Apply/${id}`})

获取参数

this.props.match.params.id

路由文件中的配置

<Route path="/Apply/:id/:orderId?" component={Apply} />

1、state模式

刷新参数会丢失

this.props.history.push({
   pathname: `/ConfirmInfo`,
   state: {
     id: item.hotelId,
     hotelName: this.state.info.hotelName,
     roomTypeId: item.id,
   },
 });

获取参数

this.props.location.state.id

返回上一页 this.props.history.go(-1)