当前位置: 首页 > news >正文

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 获取到的关于路由的相关方法和数据&#xff0c;在函数组件中还是可以继续通过参数 props 来获取使用&#xff1a; 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支持&#xff0c;默认是不开启的 cd srs/trunk && ./configure --gb28181on && make -j4 3. 编译过程中遇到的问题 …...

Web前端学习:六 -- 练习小总结

1、背景颜色透明度写法&#xff1a; background&#xff1a;rgba(R&#xff0c;G&#xff0c;B&#xff0c;Alpha透明度) 透明度范围&#xff1a;0–1&#xff0c;1完全不透明&#xff0c;0完全透明 2、伪类 hovar&#xff1a; 当鼠标接触该元素是&#xff0c;显示另一种样…...

微服务之 CAP原则

文章目录微服务CAP原则AC 可用性 一致性CP 一致性 分区容错性AP 可用性 分区容错性提示&#xff1a;以下是本篇文章正文内容&#xff0c;SpringCloud系列学习将会持续更新 微服务CAP原则 经过前面的学习&#xff0c;我们对 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. 把数字翻译成字符串 一、递归算法解析 给定一个数字&#xff0c;我们按照如下规则把它翻译为字符串&#xff1a;0 翻译成 “a” &#xff0c;1 翻译成 “b”&#xff0c;……&#xff0c;11 翻译成 “l”&#xff0c;……&#xff0c;25 翻译成 “z”。…...

tar命令——归档/压缩和解压缩文件

tar命令的功能是将一个或多个文件归档成一个文件&#xff0c;同时可结合gzip、bzip2和xz等压缩命令实现文件的压缩和解压缩。 tar 命令的语法格式如下&#xff1a; tar [选项] 文件或目录 常用选项如下&#xff1a; 选项作用/含义-c建立归档文件-x从归档文件中解出文件-z通…...

Softing smartLink网关——推进过程工业数字化转型

虽然在过程工业中各工厂所投入的运营时间千差万别&#xff0c;但仍需按照新标准来进行有效控制和管理&#xff0c;而这就需要使用一种能够聚合其异构数据的数字通信架构。对此&#xff0c;Softing提供了两种网关解决方案&#xff0c;可用于将过程工业通信架构集成到现有以太网系…...

Spark的常用算子

Spark的常用算子 目录内容Spark的常用算子一、转换算子&#xff08;Transformation&#xff09;二、行动算子&#xff08;Action&#xff09;三、键值对算子&#xff08;PairRDDFunctions&#xff09;四、文件系统算子&#xff08;File System&#xff09;Spark 内置算子是指 S…...

Unity Avatar Cover System - 如何实现一个Avatar角色的智能掩体系统

文章目录简介变量说明实现动画准备动画状态机State 状态NoneStand To CoverIs CoveringCover To Stand高度适配高度检测脚部IK简介 本文介绍如何在Unity中实现一个Avatar角色的智能掩体系统&#xff0c;效果如图所示&#xff1a; 初版1.0.0代码已上传至SKFramework框架Package…...

steam/csgo搬砖项目到底真的假的?

搬砖是从国外steam市场置办游戏装备回来&#xff0c;在国内网易buff售卖&#xff0c;低买高卖&#xff0c;产生利润的一个项目。 但我真正上手后&#xff0c;才知道steam是面向全球的游戏平台&#xff0c;用户真的大的夸张&#xff01;&#xff01;市场非常巨大&#xff0c;一…...

【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)时&#xff0c;通常的类比是食品包装上的成分列表&#xff0c;它让消费者知道他们将要吃的薯片中有什么。 美国机构有90天时间创建所有软件的清单 同样&#xff0c;SBOM是一个软件中组件的清单&#xff0c;在应用程序是来自多个来源的代码的集合的时…...

[计算机组成原理(唐朔飞 第2版)]第一章 计算机系统概论 第二章 计算机的发展及应用(学习复习笔记)

第1章 计算机系统概论 1.1 计算机系统简介 1.1.1 计算机的软硬件概念 计算机系统由“硬件”和“软件”两大部分组成。 硬件 是指计算机的实体部分&#xff0c;它由看得见摸得着的各种电子元器件&#xff0c;各类光、电、机设备的实物组成如主机、外部设备等 软件 软件看不见…...

Python的数据分析相关的框架

Python特别强大&#xff0c;也是一款可以实现可数据分析语言&#xff0c;它有很多开源的库和工具&#xff0c;可以帮助数据科学家处理和分析数据。 以下是一些常用的Python库和工具&#xff1a; NumPy&#xff1a;NumPy是一个Python库&#xff0c;用于处理大型多维数组和矩阵&…...

为什么会出现植物神经紊乱 总是检查不出来该怎么办

植物神经紊乱是一种很多人都害怕的疾病&#xff0c;你们知道是为什么吗&#xff1f; 植物神经紊乱是一种神经系统失调导致的多种症状的总称&#xff0c;这种疾病是由于社会因素所诱发的脏器功能的失调&#xff0c;是一种非常复杂的疾病。而这种疾病是可能会发生在任何年龄阶段的…...

宏任务和微任务

JavaScript 把异步任务又做了进一步的划分&#xff0c;异步任务又分为两类&#xff0c;分别是&#xff1a; ① 宏任务&#xff08;macrotask&#xff09; 异步 Ajax 请求setTimeout、setInterval文件操作其它宏任务 ② 微任务&#xff08;microtask&#xff09; 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中的多态根据实际的对象类型调用对应的函数 &#xff08;1&#xff09;可以在基类中定义虚函数返回具体的类型信息 &#xff08;2&#xff09;所有的派生类都必须实现类型相关的虚函数 &#xff08;3&#xff09;每个类中的类型虚函数都需…...

雷电模拟器安卓7以上+Charles抓包APP最新教程

一、工具准备&#xff1a; 证书安装工具全局代理工具下载&#xff1a; https://download.csdn.net/download/weixin_51111267/87536481 二、Charles设置 &#xff08;一&#xff09;电脑上证书安装 &#xff08;二&#xff09;安卓模拟器上系统证书安装&#xff08;RooT权限打…...

超完整Azure游戏开发模板:游戏服务器架构终极指南

超完整Azure游戏开发模板&#xff1a;游戏服务器架构终极指南 【免费下载链接】azure-quickstart-templates Azure Quickstart Templates 项目地址: https://gitcode.com/gh_mirrors/az/azure-quickstart-templates Azure Quickstart Templates是微软提供的开源项目&…...

保姆级教程:用GATK4从玉米B73参考基因组中提取SNP和Indel(附完整代码)

玉米基因组变异检测实战指南&#xff1a;从测序数据到SNP/Indel分析全流程 在植物遗传学研究领域&#xff0c;玉米作为重要的模式作物和粮食作物&#xff0c;其基因组变异分析对品种改良和功能基因挖掘具有重要意义。本文将带领生物信息学初学者逐步完成从原始测序数据到变异检…...

终极指南:MobileAgent如何用AI智能体彻底改变跨平台自动化体验

终极指南&#xff1a;MobileAgent如何用AI智能体彻底改变跨平台自动化体验 【免费下载链接】MobileAgent Mobile-Agent: The Powerful GUI Agent Family 项目地址: https://gitcode.com/GitHub_Trending/mo/mobileagent 你是否曾经想过&#xff0c;如果有一个AI助手能够…...

网盘直链下载助手:解锁九大网盘下载速度的终极方案

网盘直链下载助手&#xff1a;解锁九大网盘下载速度的终极方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...

3个维度重新定义Cursor使用体验:如何突破免费试用限制

3个维度重新定义Cursor使用体验&#xff1a;如何突破免费试用限制 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your tri…...

2025 - 2026年国资跑步入场脑机接口,重新定义游戏规则!

突发&#xff01;国资入场脑机接口赛道2025 - 2026年&#xff0c;脑机接口赛道的资本格局悄然生变。从IT桔子融资数据来看&#xff0c;国资/政府基金密集出现在近一年的轮次中&#xff1a;上海国投先导、国投创合跟投阶梯医疗5亿战略融资&#xff1b;浦东创投、张江科投联手投资…...

在OpenClaw项目中配置Taotoken作为Agent的模型供应商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在OpenClaw项目中配置Taotoken作为Agent的模型供应商 基础教程类&#xff0c;指导在虚拟机环境使用OpenClaw框架开发AI Agent的用户…...

跨境直播里,为什么很多团队设备很强,画面却依旧不稳定?

做跨境直播的人&#xff0c;基本都会经历一个阶段&#xff1a;疯狂升级设备。更贵的相机更强的显卡更高规格的采集卡更多灯光但实际开播后&#xff1a;直播依旧掉帧OBS 占用异常推流延迟增加画面偶发模糊音视频不同步很多时候&#xff0c;问题并不是设备性能不够。而是&#xf…...

从继电器到边缘计算:拆解PAC控制器里的‘智能手机’架构(以Codesys/倍福为例)

从继电器到边缘计算&#xff1a;拆解PAC控制器里的‘智能手机’架构 在工业自动化领域&#xff0c;PAC&#xff08;可编程自动化控制器&#xff09;正逐渐取代传统PLC&#xff0c;成为智能制造的核心大脑。这种转变类似于功能手机向智能手机的进化——从单一功能到开放平台&…...

gqty:零配置强类型GraphQL客户端,颠覆传统开发体验

1. 项目概述&#xff1a;一个颠覆性的GraphQL客户端方案如果你在过去几年里深度参与过前端开发&#xff0c;尤其是与GraphQL API打交道&#xff0c;那么你一定体会过那种“甜蜜的负担”。GraphQL带来的数据查询自由度和类型安全让人着迷&#xff0c;但随之而来的客户端状态管理…...