react路由传参问题

最新推荐文章于 2025-01-23 21:16:58 发布

oldcodercaptain

最新推荐文章于 2025-01-23 21:16:58 发布

阅读量763

点赞数 2

文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_43889863/article/details/119414679

版权

本文记录了一位开发者在React项目中遇到的路由传参问题及其解决方案。最初使用state传参导致刷新丢失，后改用动态路由，但因为空参数引发错误。最终通过将参数转化为JSON对象传递，成功解决问题。文中详细比较了params、state、search和query四种传参方式的优缺点，并建议开发者根据需求选择合适的传参方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在工作中开发一个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路由传参方式

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

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