浅谈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 css float属性的特殊写法
Nov 13 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
原生js滑动轮播封装
Jul 31 Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
You might like
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python机器人运动范围问题的解答
2019/04/29 Python
python aiohttp的使用详解
2019/06/20 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
《会走路的树》教后反思
2014/04/19 职场文书
产品开发计划书
2014/04/27 职场文书
防灾减灾标语
2014/10/07 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
小学同学聚会感言
2015/07/30 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL