umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.83k stars 2.02k forks source link

子项目成功加载但是在render的下一帧就404了,或许是路由配置有问题,请教谢谢 #2985

Open gaomigithub opened 3 months ago

gaomigithub commented 3 months ago

What happens?

我像这样注册了我的umi子项目进行测试: image 这便是umi子项目sub-app-2的.umirc.ts中的配置: image

由于我选用了一个开源的叫做like-admin的一个Vue3项目作为基座,它的菜单和路由结构是类似这样: image

也就是类似 /目录/路由 的结构;然后在进入子项目2也就是我们的测试目标时在好像渲染了子项目的一瞬间跳进了404出现了如下的问题:

image

http://localhost:5173/microapp/sub-app-2/home 出现了404,这个在我曾经测试的一个umi4分别作为基座和子项目测试时候并没有出现感觉也不该出现这种成功加载render了子项目但是路由404了,我很好奇是不是我的哪里router配置出了问题? 很困惑,非常感谢来帮助我

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.

我的demo的repo

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

gaomigithub commented 3 months ago

现在发现了是因为之前404的路由path写成了'/:pathMatch(.*)*',导致了所有找不到的路由都导到404上; 于是参照这个issue下的方案做了一些修改把404页面单抽出来path做成/404,然后路由守卫那边做成大概如下尝试: image

虽然能够见到子项目了,但是console种其实能看出以下问题: image image

也就是(似乎)依然因为microapp/sub-app-2/home 在vue主项目那里的动态路由中是不存在的路由path所以会跳入404的逻辑 继续思考……