react路由传参

truman

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

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

<HashRouter>
  <div>
    <Route path="/opinion/:id/:reSwapId/:reSwapType/:recordId/:auditId/:approver/:teamId/:busiIds/:mobile/:postName/:hrNo" component={Opinion} />
  </div>
  
  //页面跳转
  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;
  
</HashRouter>

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

<HashRouter>
  <div>
    <Route path="/opinion/:id/jsonData" component={Opinion} />
  </div>
  
  //页面跳转
  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;
</HashRouter>

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

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

react路由传参方式

  1. params

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

    优点:页面刷新,参数不会丢失;

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

2.state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
//读取参数:
this.props.location.query.state;

优点:传参优雅,传递参数可传对象;

缺点:使用HashRouter的话,刷新页面,参数会丢失;

3.search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优点:页面刷新,参数不会丢失;

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

4.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优点:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失。

阅读 108
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏