解决create React-app脚手架中路由组件跳转及传参问题(2)_create-react-app怎么跳转传id-程序员宅基地

技术标签: react.js  前端框架  前端  react  React  

二、通过 state 属性传参(基本数据、复杂数据类型)

        使用 Link 或 封装的withRouter函数中的 navigate 的第二个参数state来实现路由组件之间的传递数据,在路径中 ?传参只能传递基本数据类型,使用 state传参可以传递一个对象或数组等复杂数据类型和基本数据类型的的数据

        

         将数据传入 List.jsx列表页面后,在componentDidMount钩子中,使用 useLocation 组件接收,

        注意:如果使用的是React Hooks函数组件可以直接在组件内,导入 useLocation  方法进行实例化对象, 直接使用,

const location = new useLocation();

        但是如果使用的是 React class类组件,就不能直接使用 useLocation 方法,因为该方法需要在函数内使用,我们可以封装一个高阶组件(大家有需要封装高阶组件的可以看一下我之前的博客),将类组件传入该组件,通过返回一个新的组件,这样在该组件内就可以通过 this.props 来使用高阶组件中的方法。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_58576761/article/details/125693222

智能推荐

ABAP OO的方式实现ALV_abap ooalv-程序员宅基地

文章浏览阅读1.5k次。OOALV1.ALV 相关参数定义2.定义OOALV的单击事件及实现3.获取数据并展示4.表头字段设置5.ALV输出格式6.展示ALV7.其他1.ALV 相关参数定义代码如下:DATA: gcl_alvgrid TYPE REF TO cl_gui_alv_grid, gcl_docking TYPE REF TO cl_gui_docking_container,* gc_container TYPE REF TO cl_gui_custom_container,"控件* _abap ooalv

3万字细说数据仓库体系(建议收藏)-程序员宅基地

文章浏览阅读3.1k次,点赞5次,收藏51次。一 什么是数据仓库1.1数据仓库概念数据仓库,英文名称为Data Warehouse,可简写为DW或DWH。数据仓库,是为企业所有级别的决策制定过程,提供所有类型数据支持的战略集合。它..._数据仓库体系

单调队列及其DP优化_单调队列优化dp-程序员宅基地

文章浏览阅读480次。常应用于求一个固定滑动区间的最大值或者最小值。_单调队列优化dp

实时通信之RTC_rtc简介-程序员宅基地

文章浏览阅读3.7k次。1、RTC简介 RTC(Real-time Communications),实时通信。泛指各种数据的实时传输,包括音频,视频,文本,图片等媒体和非媒体数据的实时传输。2、RTC 和 WebRTC 的区别 实时通信(RTC)最容易和 WebRTC 混淆,实际上,二者并不相等。一次RTC通信的简要流程如下图所示: RTC 从功能流程上来说,包含采集、编码、前后处理、传输、解码、缓冲、渲染等很多环节,上图展现了一次 RTC 通信的简要流程。每一个细分环..._rtc简介

MySQL使用时遇到的问题总结_error 1262 (01000): row 1 was truncated; it contai-程序员宅基地

文章浏览阅读3.8k次,点赞3次,收藏15次。1、MySQL导入csv文件LOAD DATA INFILE '/tmp/all_macvendor_devtype.csv'INTO TABLE tbl_devtype_script_all_macvendor_devtype_tempFIELDS TERMINATED BY ','OPTIONALLY ENCLOSED BY '"'lines terminated by '\r\n'ignore 1 lines(strkey, strdevtype);FIELDS TERMIN.._error 1262 (01000): row 1 was truncated; it contained more data than there w

使用Intellij idea创建一下java后台项目并实现第一个接口_idea后端实例接口教程-程序员宅基地

文章浏览阅读6.9k次,点赞5次,收藏40次。使用Intellij idea创建一下java后台项目1.下载并安装Intellij idea.2.选择Create New Project3勾选左侧的Spring Initializr ,点击next4.填写项目名称和包名,点击next5.勾选左侧web ,然后勾选中间的sping web,点击右侧的next6.等待项目创建完成。..._idea后端实例接口教程

随便推点

vant组件库中form表单的错误使用_微信小程序 vant组件库 有form-程序员宅基地

文章浏览阅读1.7k次。错误展示:如下图所示:点击"获取验证码"按钮后,表单应该只验证手机号这一个表单项,但是出现了图中所示的效果:整个表单都验证了,然而控制台显示的却是只验证了手机号这一项,这是怎么回事?错误原因:排查了许久,最后发现竟是自己粗心,忘记给“获取验证码按钮”的native-type设置为button了,晕死!果然不靠谱...vant组件库form表单拉到最底下有个常见问题:解决方法:给“获取验证码按钮”的native-type设置为button就好啦!就是这么简单~示例代码:&_微信小程序 vant组件库 有form

浩然战法--黄金柱选股-程序员宅基地

文章浏览阅读299次。浩然黄金柱战法,一共有2种,一种是多头形态,一种是空头形态一、多头形态1.出现黄金柱,涨幅必须大于5%。2.位置,刚刚出现过20均线金叉60均线,呈现多头形态。3.庄进场指标,力度大于前一天。4.大幅高开的要放弃。(参看进场时间)二、空头形态1.出现黄金柱,涨幅必须大于5%2.庄进场指标,力度大于前一天。3.大幅高开的要放弃。(参看进场时间)4.一阳(..._股票指标-黄金柱选股指标

DCMM数据管理能力成熟度评估-微信小程序_dcmm 操作题-程序员宅基地

文章浏览阅读2.1w次。数据管理做它的出发点它是一个简单工具类微信小程序用于企业数据管理能力成熟度的初步评估 做它的理论依据 通过收集企业数据管理能力相关现状数据结合业界现有评估模型, 给出结果模型展示图评估模型, 如 DCMM设计和数据来源, 保密 它的现有功能 有两套试题1 DCMM数据能力成熟度-快速评估 (评估预计5分钟)2 DCMM数据能力成熟度-全面评估 (评估预计30分钟)试卷1快速评估, 有28道题每道题 为DCMM的28个子域,中的一个你简单..._dcmm 操作题

兴盛优选后端技术栈的理解-程序员宅基地

文章浏览阅读172次。毕业三个月,入职了长沙兴盛优选后端开发工程师一职,这里用的技术栈十分类似阿里淘系,因为大部分员工都是社招从阿里挖过来的.既然是淘系技术栈,常见的就是那一套dubbo+zk当分布式框架,spring全家桶,常见中间件redis,mq等,还使用到了携程研发的配置中心Apollo。缓存的使用,消息队列的使用都是很基本的层面。兴盛优选后端技术栈的理解。

Could NOT find HDF5 (missing: HDF5_LIBRARIES HDF5_INCLUDE_DIRS)问题解决笔记-程序员宅基地

文章浏览阅读1.5w次。问题描述:在安装HDF5时候,同样遇到了上次没有遇到的坑。提示出粗:cmake: 13 (message) Could NOT find HDF5 (missing: HDF5_LIBRARIES HDF5_INCLUDE_DIRS)可是按照上次的笔记没有问题啊ubuntu安装HDF5链接库。怎么又抽风找不到了。问题解决:声明变量地址,即可解决。export PA_could not find hdf5

2021-01-16_libmysql.dll在哪-程序员宅基地

文章浏览阅读248次。vs2017 连接mysql 8.0我的环境:vs2017 64bit + mysql 8.0 64 bit(完整版)1.把 libmysql.dll 复制到 xxx.vcxproj 的同级目录,libmysql.dll 在安装mysql安装目录下找,我的在C:\Program Files\MySQL\MySQL Server 8.0\lib文件夹里。放到这个位置:libmysql.lib 拷贝到 与xxx.sln 同级目录的 自己新建的lib文件夹下(工程文件夹的其他位置均可,加载的时候对应好_libmysql.dll在哪