05-路由中的Hook
hook中使用 this.props中的路由
类组件中我们通过 this.props 获取到的关于路由的相关方法和数据,在函数组件中还是可以继续通过参数 props 来获取使用:
export default function Login(prosp) {return (<button onClick={() => {props.history.push('/') }}>登录</button>)
}
同样的,在类组件中,如果我们需要非路由组件,需要使用 withRouter 进行包裹处理的,在函数组件中也一样的可以使用:
import { withRouter } from 'react-router-dom';function TheHeader(props) {return (<button onClick={() => {props.history.push('/login')}}>登录</button>)
}export default withRouter(TheHeader)
第三方 路由Hook
但是,react-router-dom 路由插件也给我们专门提供了第三方的 hook 来实现路由的跳转,以及参数的获取等操作:
import { useHistory, useLocation, useParams,Link } from 'react-router-dom';
export default function TheHeader() {const history = useHistory();const location = useLocation();const params = useParams();return (<button onClick={() => {history.push('/login')}}>退出</button>)
}
说明:
-
useHistory():获取 history 对象, history 对象提供了路由的跳转方法;- 例如 push方法、go方法、replace方法
-
useLocation():获取 location 对象,location 对象提供了路由的一些描述相关信息;- 提供路由的一些描述信息,例如 路径pathName等
-
useParams():获取动态路由的参数对象;-
提供路由传递的一些参数
-
注意只有动态路由传递的参数可以获取到,其他query等方式传递的参数 获取不到
-
-
Link:Link标签跳转
相关文章:
05-路由中的Hook
hook中使用 this.props中的路由 类组件中我们通过 this.props 获取到的关于路由的相关方法和数据,在函数组件中还是可以继续通过参数 props 来获取使用: export default function Login(prosp) {return (<button onClick{() > {props.history.pu…...
Ubuntu20.04 源码编译安装SRS-6流媒体服务器,开启GB28181支持
1. 下载SRS源码 直接从仓库clone git clone -b develop https://gitee.com/ossrs/srs.git 2. 编译源码 此处通过 --gb28181on 开启GB28181支持,默认是不开启的 cd srs/trunk && ./configure --gb28181on && make -j4 3. 编译过程中遇到的问题 …...
Web前端学习:六 -- 练习小总结
1、背景颜色透明度写法: background:rgba(R,G,B,Alpha透明度) 透明度范围:0–1,1完全不透明,0完全透明 2、伪类 hovar: 当鼠标接触该元素是,显示另一种样…...
微服务之 CAP原则
文章目录微服务CAP原则AC 可用性 一致性CP 一致性 分区容错性AP 可用性 分区容错性提示:以下是本篇文章正文内容,SpringCloud系列学习将会持续更新 微服务CAP原则 经过前面的学习,我们对 SpringCloud Netflix 以及 SpringCloud 官方整个生…...
乐鑫特权隔离机制 #4 | 用户应用程序的安全启动
乐鑫特权隔离机制 系列文章 #4 目录 安全启动 (Secure boot) 受保护应用程序的安全启动 (Secure boot for protected app ) 用户应用程序的安全启动 (Secure boot for user app) 基于证书的验证方案 (Certificate-based verification scheme) 必要条件验证过程…...
剑指 Offer 46. 把数字翻译成字符串
摘要 剑指 Offer 46. 把数字翻译成字符串 一、递归算法解析 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 “a” ,1 翻译成 “b”,……,11 翻译成 “l”,……,25 翻译成 “z”。…...
tar命令——归档/压缩和解压缩文件
tar命令的功能是将一个或多个文件归档成一个文件,同时可结合gzip、bzip2和xz等压缩命令实现文件的压缩和解压缩。 tar 命令的语法格式如下: tar [选项] 文件或目录 常用选项如下: 选项作用/含义-c建立归档文件-x从归档文件中解出文件-z通…...
Softing smartLink网关——推进过程工业数字化转型
虽然在过程工业中各工厂所投入的运营时间千差万别,但仍需按照新标准来进行有效控制和管理,而这就需要使用一种能够聚合其异构数据的数字通信架构。对此,Softing提供了两种网关解决方案,可用于将过程工业通信架构集成到现有以太网系…...
Spark的常用算子
Spark的常用算子 目录内容Spark的常用算子一、转换算子(Transformation)二、行动算子(Action)三、键值对算子(PairRDDFunctions)四、文件系统算子(File System)Spark 内置算子是指 S…...
Unity Avatar Cover System - 如何实现一个Avatar角色的智能掩体系统
文章目录简介变量说明实现动画准备动画状态机State 状态NoneStand To CoverIs CoveringCover To Stand高度适配高度检测脚部IK简介 本文介绍如何在Unity中实现一个Avatar角色的智能掩体系统,效果如图所示: 初版1.0.0代码已上传至SKFramework框架Package…...
steam/csgo搬砖项目到底真的假的?
搬砖是从国外steam市场置办游戏装备回来,在国内网易buff售卖,低买高卖,产生利润的一个项目。 但我真正上手后,才知道steam是面向全球的游戏平台,用户真的大的夸张!!市场非常巨大,一…...
【Python笔记20230307】
基础 编码、解码 str.encode(utf-8) # 编码 str.decode(utf-8) # 解码关键字 import keyword keyword.kwlist格式化输出 % 占位符:%s 字符串%d 整数%f 浮点数Hello, %s % world Hi, %s, you have $%d. % (Michael, 1000000) 占位符的修饰符 -左对齐 .小数点后位数 0左边补零…...
SBOM应该是软件供应链中的安全主食
当谈到软件材料清单(SBOM)时,通常的类比是食品包装上的成分列表,它让消费者知道他们将要吃的薯片中有什么。 美国机构有90天时间创建所有软件的清单 同样,SBOM是一个软件中组件的清单,在应用程序是来自多个来源的代码的集合的时…...
[计算机组成原理(唐朔飞 第2版)]第一章 计算机系统概论 第二章 计算机的发展及应用(学习复习笔记)
第1章 计算机系统概论 1.1 计算机系统简介 1.1.1 计算机的软硬件概念 计算机系统由“硬件”和“软件”两大部分组成。 硬件 是指计算机的实体部分,它由看得见摸得着的各种电子元器件,各类光、电、机设备的实物组成如主机、外部设备等 软件 软件看不见…...
Python的数据分析相关的框架
Python特别强大,也是一款可以实现可数据分析语言,它有很多开源的库和工具,可以帮助数据科学家处理和分析数据。 以下是一些常用的Python库和工具: NumPy:NumPy是一个Python库,用于处理大型多维数组和矩阵&…...
为什么会出现植物神经紊乱 总是检查不出来该怎么办
植物神经紊乱是一种很多人都害怕的疾病,你们知道是为什么吗? 植物神经紊乱是一种神经系统失调导致的多种症状的总称,这种疾病是由于社会因素所诱发的脏器功能的失调,是一种非常复杂的疾病。而这种疾病是可能会发生在任何年龄阶段的…...
宏任务和微任务
JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是: ① 宏任务(macrotask) 异步 Ajax 请求setTimeout、setInterval文件操作其它宏任务 ② 微任务(microtask) Promise.then…...
使用WebSocket、SockJS、STOMP实现消息实时通讯功能
客户端 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><title>websocket client</title><script src"http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>…...
C++回顾(十一)—— 动态类型识别和抽象类
11.1 动态类识别 11.1.1 自定义类型 C中的多态根据实际的对象类型调用对应的函数 (1)可以在基类中定义虚函数返回具体的类型信息 (2)所有的派生类都必须实现类型相关的虚函数 (3)每个类中的类型虚函数都需…...
雷电模拟器安卓7以上+Charles抓包APP最新教程
一、工具准备: 证书安装工具全局代理工具下载: https://download.csdn.net/download/weixin_51111267/87536481 二、Charles设置 (一)电脑上证书安装 (二)安卓模拟器上系统证书安装(RooT权限打…...
Guitar Pro 8.1.5作为吉他爱好者的练琴神器,其跨平台支持与强大功能值得重点关注。本评测聚焦其核心优势与操作要点,为吉他学习者与原创音乐人提供高效解决方案。跨系统兼容性Guit
Guitar Pro 8.1.5作为吉他爱好者的练琴神器,其跨平台支持与强大功能值得重点关注。本评测聚焦其核心优势与操作要点,为吉他学习者与原创音乐人提供高效解决方案。跨系统兼容性 Guitar Pro 8.1.5同时支持macOS与Windows系统,mac用户无需转战Wi…...
深度学习在系外行星探测中的应用:ExoDNN框架解析与实践
1. 项目概述:当深度学习遇见星空系外行星探测,这个听起来就充满科幻感的领域,在过去二十年里彻底改变了我们对宇宙的认知。从最初通过“凌星法”和“径向速度法”发现几颗气态巨行星,到如今TESS、开普勒等太空望远镜的海量数据中&…...
大模型提示词驱动的工业图像标注流水线实战
1. 这不是“打标签”,而是让大模型替你做标注决策的整套工作流“Prompt-Based Automated Data Labeling and Annotation”——光看这个标题,很多人第一反应是:“哦,用大模型自动打标签”。但干过三年以上NLP数据工程、带过两个以上…...
在旧版iOS设备上部署ChatGPT客户端:逆向工程与兼容性实战
1. 项目概述:为旧版iOS设备注入AI灵魂 如果你手头还保留着一台运行iOS 6或7的iPhone 4s、iPad 2,或者任何被时代“遗忘”的旧设备,看着它们除了怀念似乎别无他用,那么今天分享的这个项目,或许能让它们重获新生。我最近…...
ThunderAI:开箱即用的桌面AI助手,聚合Ollama与多模型应用实战
1. 项目概述:一个开箱即用的AI助手桌面应用最近在折腾本地AI应用的时候,发现了一个挺有意思的项目,叫ThunderAI。这名字听着就挺带劲,像一道闪电,主打的就是一个“快”和“直接”。简单来说,它就是一个基于…...
5大架构决策原则:ComfyUI-Manager如何平衡技术演进与系统兼容性
5大架构决策原则:ComfyUI-Manager如何平衡技术演进与系统兼容性 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable vari…...
别再死记硬背了!用MIDI键盘和DAW软件(如FL Studio/Cubase)5分钟搞懂钢琴音区划分
别再死记硬背了!用MIDI键盘和DAW软件5分钟搞懂钢琴音区划分 第一次打开DAW的钢琴卷帘窗时,那些密密麻麻的C3、C4编号是否让你一头雾水?作为从乐队吉他手转型音乐制作的过来人,我完全理解这种困惑。传统教材里"小字组"&q…...
告别环境报错!保姆级教程:从JRE到STM32CubeMX 6.10.0的完整安装与配置
从零搭建STM32开发环境:CubeMX 6.10.0避坑全指南 刚拿到STM32开发板时的兴奋,往往在环境配置阶段就被各种报错消磨殆尽。作为过来人,我深刻理解那种看着红色错误提示却无从下手的挫败感。本文将带你用最稳妥的方式完成从Java环境到CubeMX的全…...
想转行AI?大模型4大热门方向深度解构!小白也能收藏的进阶指南
AI大模型领域岗位需求激增,人才缺口超500万。本文深度解析大模型4大热门方向:算法研发与模型预训练(门槛高,偏研究)、模型对齐与后训练优化(岗位增长快,数据驱动)、推理工程与模型部…...
基于VitePress构建开源AI智能体框架深度中文文档站实战指南
1. 项目概述:一个为AI智能体框架量身打造的中文文档站如果你正在寻找一个能帮你把Claude、GPT这些大模型快速接入到微信、Telegram、飞书等聊天软件的开源框架,那你大概率会接触到OpenClaw(原名ClawdBot)。但当你兴冲冲地打开官方…...
