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

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

结论: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.lryc.cn/news/98487.html

相关文章:

  • Aerotech系列文章(3)运动设置命令Motion Setup Commands
  • 线性神经网络——softmax 回归随笔【深度学习】【PyTorch】【d2l】
  • 【Nodejs】Node.js开发环境安装
  • 梅尔频谱(Mel spectrum)简介及Python实现
  • 【数据结构】实验六:队列
  • 【Linux线程】第一章||理解线程概念+创建一个线程(附代码加讲解)
  • Android进阶之微信扫码登录
  • macOS Monterey 12.6.8 (21G725) Boot ISO 原版可引导镜像
  • Unity自定义后处理——用偏导数求图片颜色边缘
  • 本地Git仓库和GitHub仓库SSH传输
  • 【C++11】——右值引用、移动语义
  • 消息服务概述
  • 【Spring Boot】Web开发 — 数据验证
  • 技术分享 | App常见bug解析
  • 树莓派Pico|RP2040|使用SWD进行调试|构建 “Hello World“ debug版本
  • Ubuntu18.04 下配置Clion
  • 数据库管理-第九十四期 19c OCM之路-第四堂(02)(20230725)
  • 以智慧监测模式守护燃气安全 ,汉威科技“传感芯”凸显智慧力
  • 【阅读笔记】一种暗通道优先的快速自动白平衡算法
  • OpenStack之云主机管理
  • Linux系列---【Ubuntu 20.04安装KVM】
  • 【Vue3】局部组件和全局组件
  • vscode开发Go和Java
  • 自定义MVC
  • 简单分享婚宴预订小程序怎么做
  • 【多模态】19、RegionCLIP | 基于 Region 来实现视觉语言模型预训练
  • 本地文件夹上传到Github
  • 云原生|kubernetes|kubernetes集群部署神器kubekey安装部署高可用k8s集群(半离线形式)
  • Vite + Vue3 +TS 项目router配置踩坑记录! ===>“找不到模块“vue-router”或其相应的类型声明。“<===
  • windows安装npm, 命令简介