react路由参数传递

react路由组件参数传递的3种方式

1.search参数传递最常用

link标签传递。

// 向路由组件传递search参数
<Link to={`/home/?id=${msgObj.id} & title=${msgObj.title}`}><Link>

// search参数无需声明接收，正常注册即可
<Rout component={detial} path="/home"></Rout>

//页面接受search参数
const {search}=this.props.location//参数在this.props.location.search里
const {id,title}=qs.parse(search.slice(1))//通过qs插件转换参数格式

js方式传递

  this.props.history.push( {pathname : `/home/ ?id=${msgObj.id} & title=${msgObj.title } `} )

2.state参数传递与query参数

link标签传递

// 向路由组件传递state参数
<Link to={ { pathname:'/home' , state:{  id : msgObj.id, title : msgObj.title } } }><Link>
<Link to={ { pathname:'/home' , query:{  id : msgObj.id, title : msgObj.title } } }><Link>

// state和query参数无需声明接收，正常注册即可
<Rout component={detial} path="/home"></Rout>

//页面接受state参数
const {id,title}=this.props.location.state//参数在this.props.location.state里
const {id,title}=this.props.location.query//参数在this.props.location.query里

js方式传递

 this.props.history.push({ pathname:'/home',state:{id: msgObj.id,title:msgObj.title } })
 this.props.history.push({ pathname:'/home',query:{id: msgObj.id,title:msgObj.title } })

3.params参数

// 向路由组件传递params参数
<Link to={`/home/${msgObj.id}/${msgObj.title}`}><Link>

// params参数声明
<Rout component={detial} path="/home/:id/:title"></Rout>

//页面接受state参数
const {id,title}=this.props.match.params//参数在this.props.match.params里

js方式传递

 this.props.history.push({ pathname:`/home/${msgObj.id}/${msgObj.title}`})