关于前端:react路由传参

之前在工作中开发一个 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

长处：传参优雅，传递参数可传对象；
毛病：刷新地址栏，参数失落。