路由页面跳转以及传值

一、react-router@5

react-router@5页面跳转传参的几种方式：

路由注册：

<Route path=' /Target ' component={TargetPage}></Route>

（1）props.location.query：

①发起页面跳转

HTML方式：

<Link to={
  { path : ' /target ' , query : { status : 'BeOK' }} >XXXX</Link> 

JS方式：

props.history.push({ pathname : '/target' , query : { status : 'BeOK' }})

 ②目标页面

const status=this.props.location.query.status;
//就可以接受到传递过来的参数（status）

 ( 2）props.location.state：同query差不多，但是state传的参数是加密的，query传的参数是公开的，会在地址栏中显示

①发起页面跳转

HTML方式：