浅谈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事件列表解说
Dec 22 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
微信小程序实现弹框效果
May 26 Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
codeigniter数据库操作函数汇总
2014/06/12 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
ThinkPHP路由详解
2015/07/27 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python制作最美应用的爬虫
2015/10/28 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Django框架表单操作实例分析
2019/11/04 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
医学生求职自荐信
2013/10/25 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
经典英文广告词
2014/03/18 职场文书
《春笋》教学反思
2014/04/15 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
营运督导岗位职责
2015/04/10 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
索尼ICF-36收音机评测
2022/04/30 无线电