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路由传参方式

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

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

react路由传参问题相关推荐

react路由传参的几种方式
第一种传参方式,动态路由传参 <Link to='/home/dx'>首页</Link><Route path="/home/:name" compo ...
react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
react路由：路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...
React通过url传参和通过路由传参
是基于我写的上一篇文章<用react的路由写一个简单的导航>上面扩展出来的,朋友们可以去康康. 通过url传参的方法有: 1)直接? 接收:this.props.location.sear ...
react 的路由传参
1.路由传参 1.动态路由传参使用prop进行接收 props.match.params.参数名 2.query传参 this.props.history.push({ pathname: '路由' ...
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
umiJS Umi 是蚂蚁金服的底层前端框架中文可发音为乌米,是可扩展的企业级前端应用框架.Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备.同时有强大的插件扩展各种功能. ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...

react路由传参问题

react路由传参方式

react路由传参问题相关推荐

最新文章

热门文章