浅谈react路由传参的几种方式


Posted in Javascript onMarch 23, 2021

第一种传参方式,动态路由传参

通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url

<Link to='/home?name=dx'>首页</Link>

如果想真正获取到传递过来的参数,需要在对应的子组件中
this.props.location.search 获取字符串,再手动解析

因为传参能够被用户看见,传递获取比较麻烦,所以不推荐

第二种传参方式,隐式路由传参

<Link to={{
     pathname: 'about',
     state: {
      name: 'dx'
     }
    }}>关于</Link>

所谓隐式路由传参,就是传参的信息不回暴露在url中,当点击该link标签,想要获取到传递的参数,就在对应的路由组件中,通过this.props.location.state获取即可

推荐使用,比较安全,获取传递参数都比较方便

第三种传参方式 组件间传参

何时使用?
当一个路由组件需要接收来自父组件传参的时候

改造route标签通过component属性激活组件的方式
正常情况下的route标签在路由中的使用方式

//简洁明了,但没办法接收来自父组件的传参
<Route path='/test' component={Test}></Route>

改造之后

<Link to='/test'>测试</Link>
<Route path='/test' render={(routeProps) => {
 //routeProps就是路由组件传递的参数
     return (
     //在原先路由组件参数的情况,扩展绑定父组件对子组件传递的参数
      <Test {...routeProps} name='dx' age={18} />
     )
 }}></Route> 

当点击link标签时,通过在对应的test子组件中,this.props获取来自父组件传递的参数和路由组件自带的参数
强烈推荐,传递参数略微有些麻烦,接收参数十分方便,并且仍然可以接收路由组件自带的参数,安全,不会被用户看见

第四种传参方式 withRouter 高阶组件给子组件绑定路由参数

withRouter 何时使用?
想要在某个子组件中获取路由的参数,必须得使用路由中的route标签的子组件才能被绑定上路由的参数。

为了解决不通过route标签绑定的子组件获取路由参数的问题,需要使用withRouter

一般用在返回首页,返回上一级等按钮上

import React from 'react';
import BackHome from './backhome';
export default class Test extends React.Component {
 render () {
  console.log(this.props)
  return (
   <div>
    这是测试的内容
//返回首页的按钮不是通过route标签渲染的,所以该子组件的this.props中没有路由参数
    <BackHome>返回首页</BackHome> 
   </div>
  )
 }
}
import React from 'react';
//导入withRoute
import {withRouter} from 'react-router-dom';
class BackHome extends React.Component {
 goHome = () => {
  //必须在使用withRouter的情况下,该组件在this.props中才有路由参数和方法
  //否则,会报错
  this.props.history.push({
   pathname: '/home',
   state: {
    name: 'dx' //同样,可以通过state向home路由对应的组件传递参数
   }
  })
 }
 render () {
  return (
   <button onClick={this.goHome}>this.props.children</button>
  )
 }
}
//导出的时候,用withRouter标签将backHome组件以参数形式传出
export default withRouter(BackHome)

当你需要使用的时候,就很重要,所以还是比较推荐。

Javascript 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
You might like
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
javascript轮播图算法
2016/10/21 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
vue-router单页面路由
2017/06/17 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Django内容增加富文本功能的实例
2017/10/17 Python
快速入门python学习笔记
2017/12/06 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python3中列表list合并的四种方法
2019/04/19 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
后勤自我鉴定
2013/10/13 职场文书
干部选拔任用方案
2014/05/26 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
校本研修个人总结
2015/02/28 职场文书
年底个人总结范文
2015/03/10 职场文书
面试通知短信
2015/04/20 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
Golang 遍历二叉树
2022/04/19 Golang