react中路由携带参数的三种方式

携带params参数

        // 路由链接（携带参数）：
        <Link to={
    
    `/home/message/detail/${
      
      msgObj.id}/${
      
      msgObj.title}`}>{
    
    msgObj.title}</Link>
        // 注册路由（声明接收）：
        <Route path='/home/message/detail/:id/:title' component={
    
    Detail}/>
        //接收参数：
        const {
    
    id,title}=this.props.match.params

携带search参数

// 路由链接（携带参数）：
<Link to={
    
    `/home/message/detail?id=${
      
      msgObj.id}&title=${
      
      msgObj.title}`}>{
    
    msgObj.title}</Link>
// 注册路由（无需声明，正常注册即可）：
<Route path='/home/message/detail' component={
    
    Detail}/>
// 接收参数：
const {
    
    search}=this.props.location
const {
    
    id,title}=qs.parse(search.slice(1))
//备注：获取到的search是urlencoded编码字符串，需要借助qs这个库解析,qs上面有parse和stringify两个方法

携带state参数

// 路由链接（携带参数）：
<Link to={
    
    {
    
    pathname:'/home/message/detail',state:{
    
    id:msgObj.id,title:msgObj.title}}}>{
    
    msgObj.title}</Link>
// 注册路由（无需声明，正常注册即可）：
<Route path='/home/message/detail' component={
    
    Detail}/>
// 接收参数：
const {
    
    id,title}=this.props.location.state || {
    
    }
// 备注：刷新也可以保留住参数