react微应用hash模式无法响应主应用路由变化

最新推荐文章于 2024-05-05 13:41:55 发布
最新推荐文章于 2024-05-05 13:41:55 发布
阅读量544 收藏
点赞数
分类专栏： bug 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gudeng007/article/details/121086621
版权

遇到一个十分奇怪的问题，希望有大佬能给解惑：

  1. 使用qiankun进行微前端改造，主应用是vue hash模式，微应用是react hash模式；
  2. react微应用单独测试没有任何问题；
  3. 通过主应用菜单切换路由跳转的时候，微应用无法响应，不会跳转；
  4. 通过浏览器前进后退操作，微应用可以响应对应的路由；

将主应用和微应用都改为browser模式可修复此问题；
前提是主应用和子应用都由我维护，所以可以随便改；
有大神可以帮忙解惑吗？？？

只爱喝白开水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue-router两种模式区别及使用注意事项详解
10-16
主要介绍了vue-router两种模式区别及使用注意事项,结合实例形式详细分析了vue-router两种模式hash模式与history模式的区别、用法与操作注意事项,需要的朋友可以参考下
react学习之hash路由实现原理
关注我！带你一路 "狂飙" 到底！
12-09 622
组件需要在项目首次加载时解析当前的hash值，并且监听hash值的变化，根据hash值，来通知 children 当前的路由地址。2、创建两个组件 home.js 、 setting.js，使用hash路由来实现两个组件的切换。标签包裹，实际上需要达到共享路由当前地址的目的，借助react中的 context 来实现。注：如果需要实现路由嵌套和动态路由，当前的hash地址和组件配置的地址比较就不是使用。事件中解析初始的URL，从而展示进入的页面。组件是根据当前的hash地址判断当前的。
2024年react学习之hash路由实现原理_react 哈希路由，程序员工作2年月薪12K
最新发布
2401_84267585的博客
05-05 815
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！//当前的hash地址和组件配置的地址比较，相等就进入路由对应的组件，不想等则不显示组件。// 监听之后hash值的变化,进入路由和返回。path: “/”,//路由当前hash地址。// 用于共享路由当前hash地址。// 先解析第一次的hash值。//获得当前hash地址。
qiankun微前端子应用热更新失效问题
白开水的博客
05-07 2754
主应用是vue，使用vue-cli构建，子应用是react，使用create-react-app构建。本地开发中主应用和子应用一起启动，发现子应用无法热更新。 主应用端口号：8080 子应用端口号：3000 原因分析 子应用的热更新包是在3000端口下，而子应用嵌入主应用后请求的是主应用的端口8080，导致子应用拿不到.hot-update.json文件，进而导致无法进行热更新。 查看源码发现，热更新时李静这里使用/，会直接将请求发送到当前url下，也就是主应用，主应用没有这个文件，无法热更新。
vue qiankun 主应用访问子应用 不显示也不报错
热门推荐
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
vue 路由的hash路由模式特点
m0_67865884的博客
08-22 431
vue 路由的hash路由模式
深入理解react-router 路由的实现原理
10-17
React Router 是 React 应用程序中的关键组件，它允许开发者管理应用程序中的路由，实现视图与 URL 的同步。本文将深入探讨 React Router 的实现原理，重点关注其依赖库 `history`，以及如何使用 `history` 来构建一...
详解前端路由实现与react-router使用姿势
08-29
1. 路由的配置：使用React Router时，需要在应用程序中配置路由规则，例如： ``` <Router history={hashHistory}> ``` 在上面的代码中，我们配置了一个基本的路由规则，包括根路由、repos路由和about路由。...
react-test-hash-change
05-18
这个项目"react-test-hash-change"就是一个简单的例子，它展示了如何在React中使用JavaScript来实现对URL哈希值变化的响应。下面将详细探讨相关知识点。 1. **React基础**：React是一个用于构建用户界面的...
详解react-router 4.0 下服务器如何配合BrowserRouter
11-27
在React开发中，路由管理是不可或缺的一部分，而`react-router`是React生态中广泛使用的路由库。在`react-router 4.0`版本中，为了适应不同场景的需求，引入了四种不同的路由组件：`BrowserRouter`, `HashRouter`, `...
Vue进阶（八十五）：vue-router Hash模式跳转及懒加载
IT全栈 华强工作室
11-27 3086
vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于：路由跳转不需要刷新整个页面。 大概流程可以看成: 浏览器发出请求 服务器监听到端口有请求过来,并解析url路径 根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等) 浏览器根据数据包的 Content-type 来决定如何解析数据 简单来说路由就是用来跟后端...
关于微前端 micro-app 子项目二次路由跳转问题
byfate的博客
07-01 3292
业务原因，进入子项目时子项目主页需要根据基座传递的参数replace到不同的路由。（replace是方便返回到基座主页）问题是子项目页面后，返回到基座再进来，子项目在created或者mounted中调用this.$router.replace(url)时，router好像是以基座的地址进行跳转。解决办法，设置定时 ：...
react路由hash转brower访问页面，页面空白
记录
07-26 710
初始使用的hash路由，即http://localhost:8000/#/index这种#分隔的方式，这种路由方式就是刷新后页面始终会回到首页，这不是想要的想过，所以就想要改成http://localhost:8000/index这种方式，即brower路由。 改动前的配置： 前端编译后生成文件路径： 改动后history不设置，默认就是brower路由方式。 一开始base没加，页面启动后一片空白，后续怀疑是不是后台路由和前端路由跳转混了，于是加了base配置（前端所有页面的路径都会带上front前缀
axios里面使用react-router-domV6版本的路由useNavigate 跳转的问题
qq_43853213的博客
03-30 7718
最近做项目的时候发现在axios中不能使用react routerV6版本的路由编程式跳转 本来以为可以使用 useNavigate 来实现的，实践过后发现根本不可以。 解决方案 在src 下建一个 lib文件 ， 在建立一个 history.js // lib/history.js import { createBrowserHistory } from "history"; export default createBrowserHistory(); 需要注意一下 下面代码组件 HistoryR
微前端：qiankun 主应用与子应用之间的跳转
Jane's Blog
01-04 5170
qiankun主应用与子应用间的跳转
qiankun乾坤框架子服务之间的跳转出现undefined路由
m0_37755267的博客
09-23 2802
qiankun乾坤框架子服务之间的跳转出现undefined路由
qiankun微前端路由模式
weixin_43825389的博客
10-27 1万+
qiankun在vue框架下history 和hash路由模式的使用 一、主应用是hash模式 说明 当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 #/base1 ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 #/base1/child1 ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 ba
微应用模式在集团企业移动信息化中的实践
EAWorld
08-24 214
转载本文需注明出处：微信公众号EAWorld，违者必究。随着移动互联网的快速发展及智能手机的不断普及，越来越多的企业将“移动化”作为优先的IT需求。在移动建设早期企业大多...
micro_app解决项目中实际遇到的问题（浏览器回退url错乱）
weixin_44441196的博客
03-31 3180
1.子应用点击回退路径错乱 // 在子应用（vue-router4）中添加如下设置 ：没有对路由堆栈state做唯一性标记，导致基座和子应用相互影响，vue-router3及其它框架路由没有类似问题 if (window.__MICRO_APP_ENVIRONMENT__) { // 如果__MICRO_APP_BASE_ROUTE__为 `/基座应用基础路由/子应用基础路由/`，则应去掉`/基座应用基础路由` // 如果对这句话不理解，可以参考案例：https://github.com/mi.
react history和hash路由
03-16
React Router是一个用于构建单页应用程序的库。它提供了两种路由方式：history路由和hash路由。 history路由使用HTML5的history API来管理URL的变化。这种路由方式可以让URL看起来更加美观，而且可以使用浏览器的前进和后退按钮来导航。但是，它需要服务器的支持，因为在刷新页面时，服务器需要返回正确的HTML文件。 hash路由使用URL中的哈希值来管理URL的变化。这种路由方式不需要服务器的支持，因为哈希值的变化不会导致浏览器向服务器发送请求。但是，它的URL看起来不太美观，而且不能使用浏览器的前进和后退按钮来导航。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值