React 三种路由传参

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去掉前面的'？'