浅谈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 相关文章推荐
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
vue加载完成后的回调函数方法
Sep 07 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
You might like
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
信访工作者先进事迹
2014/01/17 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
小学敬老月活动方案
2014/02/11 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
农村文化活动总结
2014/08/28 职场文书
法人代表证明书格式
2014/10/01 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
培训班通知
2015/04/25 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server
如何利用python创作字符画
2022/06/25 Python