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权限打…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
