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}`})