react路由动态传参

1. 传递search参数

返回值：

//传参
 this.props.history.push('/admin/billingSystem/payment/billPay?from=bill&type=one&id=' + record.id)

//取参 
//1.npm install querystring 
//2.引入 import querystring from 'querystring'
//2.querystring.parse() 方法将 URL 查询字符串 str 解析为键值对的集合。
querystring.parse(this.props.location.search.split("?")[1]) 

//解析为
{
from:bill,
type:one,
id: 43
}

2. 传递params参数

返回值：

//1.定义路由
  <Route path="/trade/nineBureauTicketIssue/:num" component={NineBureauTicketIssue} />
//2.传参
 this.props.history.push({pathname: `/trade/nineBureauTicketIssue/${num}`})
//3.取参
this.props.match.params.num 

bug: “？”号传参页面跳转空白，换成下面写法解决
this.props.history.push({
pathname:/cardetails,
search:?productId=${car.productId},
})

3.传递state参数

传递的参不会在路由中显示，HashRouter刷新页面参数丢失，BrowserRouter刷新页面参数不会丢失

//1.传参
 this.props.history.push(`/trade/nineBureauTicketIssue/${num}`,{id:1,title:'hahahah'})
<Link to={{pathname:`/trade/nineBureauTicketIssue/${num}`,state:{id:1,title:'hahahah'}}}></Link>
//2.取参
let {id,title} = this.props.location.state