react路由传参

之前在工作中开发一个react项目的时候遇到路由传参的问题，当时因为基础不好，解决这个问题用了好久，还产生了一个bug，特此记录一下。

项目中路由跳转使用的是hashRouter，由于是详情页面跳到审批页面，携带的参数比较多，一开始用state传递参数，导致页面刷新参数丢失，最后改用动态路由传参。代码如下：

  

    
  
  
  //页面跳转
  this.props.history.push(`/opinion/id/reSwapId/reSwapType/recordId/auditId/approver/teamId/busiIds/mobile/postName/hrNo`)
  
  //参数接收
  const {opinion, id, reSwapId, reSwapType, recordId, auditId, approver, teamId, busiIds, mobile, postName, hrNo} = this.props.match.params;
  

这样看似解决了问题，但是由于有一个参数为空，直接导致审批页面报错，最后把参数转为对象传递。代码如下：

  

    
  
  
  //页面跳转
  const opinionParams = {
    "reSwapId": reSwapId,
    "reSwapType": reSwapType,
    "recordId": recordId,
    "auditId": auditId,
    "approver": approver,
    "teamId": teamId,
    "busiIds": busiIds,
    "mobile": mobile,
    "postName": postName,
    "hrNo": hrNo
  }
  const jsonData = JSON.Stringfy(opinionParams);
  this.props.history.push(`/opinion/${id}/${jsonData}`)
  
  //参数接收
  const jsonData = this.props.match.params.jsonData;
  const {opinion, id, reSwapId, reSwapType, recordId, auditId, approver, teamId, busiIds, mobile, postName, hrNo} = jsonData;

这样问题成功解决，即使参数为空页面也不会报错。

这个问题大佬可能看着很简单，但是当时却花费了我很长时间，看来基础知识储备不足真的很影响开发效率，特别是出现bug自己会毫无头绪，导致白白浪费很长时间。借此机会好好学习总结一下react路由传参。以后遇到此类问题就不怕了。

react路由传参方式

1. params

   Route path="/list/:id" component={List}
   跳转页面
   //页面跳转：
   this.props.history.push("/list/2");
   //List页面接收：
   console.log(this.props.match.params.id)//传递过来的所有参数

   优点：页面刷新，参数不会丢失；

缺点：传值太多不方便而且url会变的很长。

2.state

 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
//读取参数:
this.props.location.query.state;

优点：传参优雅，传递参数可传对象；

缺点：使用HashRouter的话，刷新页面，参数会丢失；

3.search

xxx
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优点：页面刷新，参数不会丢失；

缺点：传值太多url也会变的很长。

4.query

this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优点：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失。