qiankun 路由问题

qiankun装载了两个子项目appA,和appB
appA地址是/appA,里面配置了appA/list路由。
访问appA,路径为/appA,访问appA/list,路径为/appA/list.
访问appB,路径为/appB

访问/appA正常,访问/appB也正常。
访问/appA/list正常。这时候访问/appB也正常。
但是这时候,从/appB跳转回/appA的时候,显示的地址是/appA,但是内容是/appA/list的。

是每次装载一个子项目的时候,需要重新初始化路由??

阅读 6.7k
4 个回答

能否加个微信讨论一下 我也有类似的问题

将主项目的路由实例传给子项目
子项目的路由不要设置base而是写在每个路径前
这样跳转和返回就可以了

新手上路,请多包涵

如题,我在项目实践中也遇到类似问题,我出问题的页面是React开发的子应用,经过多次试验发现是这个子应用路由实例导致的问题。这里直接贴出代码进行说明:
image.png
上图是我修改并解决问题后的代码,红色框出的部分之前是路由实例,一个每次子应用加载都不会变的路由实例。

为什么改成每次创建路由实例,就能解决这个问题呢?其实qiankun官方只是没有明确说,但其实通过其官方文档已经窥见真相。如下图所示,React微应用官方说明里明确写了使用 ReactDOM.unmountComponentAtNode 卸载根组件,这里没有提到对于子应用路由的处理。但其实通过对比Vue框架的微应用示例,不难发现unmount生命周期钩子内还得卸载路由实例!
image.png
不得不说,qiankun框架已经是个易用性很高的微前端框架了,但是官方对于文档的撰写还是不够用心,像这些很容易踩坑的点没有明确说明。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题