React 三种路由传参
1、params传参
优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。
// 路由页面：
<Route path='/home/message/detail/:id/:title' component={
Detail}/> //注意要配置 /:id
//路由跳转并传递参数：
//链接方式：
<Link to={
`/home/message/detail/${
id}/${
title}`}>{
title}</Link>
//或：
<Link to={
{
pathname:`/home/message/detail/${
id}/${
title}`}}>{
title}</Link>
//js方式：
this.props.history.push(`/home/message/detail/${
id}/${
title}`)
// 或：
this.props.history.push({
pathname:`/home/message/detail/${
id}/${
title}`})
//获取参数：
const {
id,title} = this.props.match.params //注意这里是match而非history
2、query与state传参
优势：传参优雅，传递参数可传对象；但是state 传参的方式只支持Browserrouter路由，不支持hashrouter
缺点：刷新地址栏，参数丢失
- 2.1、query传参
//路由页面：
<Route path="/home/message/detail" component={
Detail}/> //无需配置
//路由跳转并传递参数：
// 链接方式：
<Link to={
{
pathname: '/home/message/detail',
query: {
id:id, title: title}
}}>{
title}</Link>
//js方式：
this.props.history.push({
pathname: '/home/message/detail',
query: {
id, title}
})
//获取参数：
const {
id, title} = this.props.location.query ||{
}
- 2.2、state传参
//路由页面：
<Route path="/home/message/detail" component={
Detail}/> //无需配置
//路由跳转并传递参数：
// 链接方式：
<Link to={
{
pathname: '/home/message/detail',
state: {
id:id, title: title}
}}>{
title}</Link>
//js方式：
this.props.history.push({
pathname: '/home/message/detail',
state: {
id, title}
})
//获取参数：
const {
id, title} = this.props.location.state ||{
}
###3、search传参
优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。
//路由页面：
<Route path='/home/message/detail' component={
Detail}/>
//路由跳转并传递参数：
// 链接方式：
<Link to={
`/home/message/detail/?id=${
id}&title=${
title}`}>{
title}</Link>//无需配置
//js方式：
this.props.history.replace(`/home/message/detail/?id=${
id}&title=${
title}`)
//获取参数：
const {
search} = this.props.location
const {
id, title} = qs.parse(search.slice(1)) //slice去掉前面的'？'