浅谈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的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
简述JS控制台的使用
Jul 15 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
一秒学会微信小程序制作table表格
Feb 14 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php 生成文字png图片的代码
2011/04/17 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python如何生成网页验证码
2018/07/28 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python制作简单五子棋游戏
2019/06/18 Python
Python3并发写文件与Python对比
2019/11/20 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
高中政治教学反思
2014/01/18 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
区级文明单位申报材料
2014/05/15 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
小学英语课教学反思
2016/02/15 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers