ReactRouterv5在BrowserRouter和HashRouter模式下对location.state的支持

news2024/9/29 17:32:58

结论:HashRouter不支持location.state

文档:ReactRouter v5

在这里插入图片描述

从文档可看到history.push()方法支持2个参数:path, [state]
state即是location.state,常用于隐式地传递状态参数
但文档未提的是,仅适用于BrowserRouter,HashRouter下传入后无效,通过location.state取不到值。

个人场景:微前端适配两种路由模式,这条路走不通!!亲测避坑。

Demo:

import React, { useEffect } from 'react';
import { useHistory, useLocation, BrowserRouter, HashRouter } from 'react-router-dom-v5';

const ComponentA = () => {
	const history = useHistory()
	useEffect(() => {
		history.push('xxx/ComponentB', { from: 'aaa'})
	}, [])
}
const ComponentB = () => {
	const location = useLocation()
	useEffect(() => {
		console.log(location.state)
		// BrowserRouter: { from: 'aaa' }
		// HashRouter: undefined
	}, [location])
}

// 上层Router
<BrowserRouter>
	<Route path="xxx/ComponentA" component={ComponentA} />
	<Route path="xxx/ComponentB" component={ComponentB} />
</BrowserRouter>

<HashRouter>
	<Route path="xxx/ComponentA" component={ComponentA} />
	<Route path="xxx/ComponentB" component={ComponentB} />
</HashRouter>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/803464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试-杨辉三角python递归实现,二进制转换

杨辉三角 def yang_hui(x,y):xint(x)yint(y)assert x>y,列数不应该大于行数# x 表示行&#xff0c;y表示列if y1 or yx:return 1else:return yang_hui(x-1,y-1)yang_hui(x-1,y)xinput(输入第几行) yinput(输入第几列) resultyang_hui(int(x),int(y)) print(result) #inclu…

微信聊天记录监管有多重要?

在现代企业中&#xff0c;微信成为了主流的沟通工具。越来越多企业开始关注员工聊天记录的监管问题&#xff0c;因为这直接关系到信息泄露的风险。监管员工聊天记录可以保障公司形象、保护员工的安全&#xff0c;并有助于提高员工的工作效率。 监管员工聊天记录到底有多重要&am…

算法通关村第一关——链表白银挑战笔记

文章目录 两个链表的第一个重合节点判断回文链表 两个链表的第一个重合节点 同LeetCode 160.相交链表 解法一&#xff1a;Hash和Set(集合&#xff09;&#xff0c;此处用Set合适。 把其中一个链表的所有节点引用放入set&#xff0c;再从头遍历另一个链表第一次重合的地方就是答…

【flutter】flutter如何让app内字体大小不随着系统改变而改变

如果我们不特意设置&#xff0c;flutter开发的app他的字体大小是会跟着系统设置的字体大小而改变&#xff0c;这样就会导致页面出现布局错乱问题&#xff0c;那么如何解决这个问题呢&#xff1f;我也搜索了相关资料&#xff0c;有两个常用也是网络上搜集到比较多的方法&#xf…

PostgreSQL 简洁、使用、正排索引与倒排索引、空间搜索、用户与角色

PostgreSQL使用 PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS)&#xff0c;在灵活的BSD许可证下发行。PostgreSQL 9.0 &#xff1a;支持64位windows系统&#xff0c;异步流数据复制、Hot Standby&#xff1b;生产环境主流的版本是PostgreSQL 12 BSD协议 与 GPL协议 …

三. 多传感器标定方案(空间同步)--3

前面内容&#xff1a; 一. 器件选型心得&#xff08;系统设计&#xff09;--1_goldqiu的博客-CSDN博客 一. 器件选型心得&#xff08;系统设计&#xff09;--2_goldqiu的博客-CSDN博客 二. 多传感器时间同步方案&#xff08;时序闭环&#xff09;--1 三. 多传感器标定方案&…

UE5初学者快速入门教程

虚幻引擎是一系列游戏开发工具&#xff0c;能够将 2D 手机游戏制作为 AAA 游戏机游戏。虚幻引擎 5 用于开发下一代游戏&#xff0c;包括Senuas Saga: Hellblade 2、Redfall&#xff08;来自 Arkane Austin 的合作射击游戏&#xff09;、Dragon Quest XII: The Flames of Fate、…

AI 医疗:MONAI用于医疗影像领域的深度学习

软件介绍 一套开源、免费的协作框架&#xff0c;旨在加速医学成像领域的研究和临床协作。目标是通过构建一个强大的软件框架来加快创新和临床转化的步伐&#xff0c;该框架有利于几乎各个级别的医学成像、深度学习研究和部署。 MONAI利用 3D Slicer 和 DeepEdit 算法来注释您的…

IDEA Writing classes... 比较慢

IDEA配置修改如下&#xff1a; 1、File -> Settings… 2、Build&#xff0c;Execution&#xff0c;Deployment -> Compiler Build process heap size 配置为 20483、Build&#xff0c;Execution&#xff0c;Deployment -> Compiler -> ActionScript & Flex C…

Effective Java 案例分享(八)

39、使用注解而不是通过命名规则分类 如果需要对定义class&#xff0c;property&#xff0c;或者method进行分类管理&#xff0c;推荐的做法是使用注解对其添加类别&#xff0c;而不是通过命名规则分类。这里以JUnit为例&#xff1a; 在JUnit 3中&#xff0c;如果要写测试的方…

100% RNN language model ChatRWKV 相关开源项目

RWKV(读作RwaKuv)借鉴了RNN的移动平均模型&#xff08;MA&#xff09;&#xff0c;将transformer的 O ( T 2 d ) O(T^2d) O(T2d)复杂度降低到 O ( T d ) O(Td) O(Td)&#xff0c;同时保持较好的结果表现。RWKV也是一个开源模型&#xff0c;甚至其介绍主页的html代码都有开源。以…

OpenLayers入门,OpenLayers地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系

专栏目录: OpenLayers入门教程汇总目录 前言 OpenLayers地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置最大缩放级别和最小缩放级别,超过缩放级别用户无法再放大和缩小,和设置默认坐标系。 二、依赖和使用 "ol": "^6.15.1"使用…

[VRTK4.0]添加一个Curved Pointer

学习目标&#xff1a; 演示如何将 Tilia曲线指针添加到场景&#xff0c;以及如何使用 OpenXR 指针姿势来确保指针方向始终与 OpenXR 控制器的正确方向匹配 流程&#xff1a; 步骤一&#xff1a; 现在我们需要Tilia包&#xff0c;所以我们转到窗口Tilia包导入器&#xff0c;既…

【电源专题】电量计参数RSOC/RM/FCC定义

在文章【电源芯片】电量计(Gauge)介绍中我们讲到电量计的功能就是监测电池、计量电量。 那么电量计其实也是有很多算法的,比如【电源专题】电量计估计电池荷电状态方法(开路电压法及库仑计法)的差别文章所说的开路电压法和库仑计法。当然还有如阻抗跟踪法、CEDV算法等。 …

node.js的优点

提示&#xff1a;node.js的优点 文章目录 一、什么是node.js二、node.js的特性 一、什么是node.js 提示&#xff1a;什么是node.js? Node.js发布于2009年5月&#xff0c;由Ryan Dahl开发&#xff0c;是一个基于ChromeV8引擎的JavaScript运行环境&#xff0c;使用了一个事件驱…

The Sandbox 归属周活动第二弹

邀请所有玩家在「归属谷」自由表达自己的想法。 欢迎来到第二届 The Sandbox 归属周&#xff0c;我们很高兴能与您一起庆祝&#xff01; 从 7 月 24 日到 7 月 31 日&#xff0c;我们欢迎所有人参与是次活动&#xff0c;以展示我们全球玩家、创作者、建设者和收藏者社区的独特性…

8款常见的自动化测试开源框架

在如今开源的时代&#xff0c;我们就不要再闭门造车了&#xff0c;热烈的拥抱开源吧&#xff01;本文针对性能测试、Web UI 测试、API 测试、数据库测试、接口测试、单元测试等方面&#xff0c;为大家整理了github或码云上优秀的自动化测试开源项目&#xff0c;希望能给大家带来…

信息安全战线左移!智能网联汽车安全亟需“治未病”

当汽车由典型的工业机械产品逐步发展成为全新的智能移动终端&#xff0c;汽车的安全边界发生了根本性改变&#xff0c;信息安全风险和挑战不断增加。 面对复杂的异构网络、异构系统及车规级特异性要求&#xff0c;智能智能网联汽车信息安全到底要如何防护&#xff0c;已经成为…

优维产品最佳实践第2期:一个“好”的告警通知是怎样的?

告警通知信息是监控实践中非常关键的一环&#xff0c;在众多的告警消息中&#xff0c;如何让管理员快速识别关键信息&#xff0c;从而提升故障响应效率&#xff1f; 本期EasyOps产品使用最佳实践&#xff0c;我们将为您揭晓&#xff1a; 一个称得上”好“的告警通知应该是怎样…

ICC2删除所有电源的方法

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f;知识星球入口 remove_pg_patterns -all remove_pg_strategies -all remove_pg_strategy_via_rules -all remove_pg_via_master_rules -all remove_pg_regions -all remove_routes -net_types {p…