qiankun使用过程中遇到的路由匹配问题

qiankun使用过程中遇到的路由匹配问题

问题

在原有的 qinakun 子项目B基础上开发新的需求，开发完成后进入测试阶段，测试同学反馈了个偶现问题：在父项目中先切换到A-Tab(A子项目)，再切换到B-Tab(B子项目)，页面就会出现卡死不可用。

原因

经过排查，发现是 qiankun 抛出来的error, 看截图可以发现，从 A子项目 切换到 B子项目 的时候(路由已发生切换), A子项目 没有触发 unmounted，然后 B子项目 一直没能等来 mounted, 最终因挂载超时抛出Error。

排查

发现之前的子项目配置的路由有问题，B项目 中的路由路径 前缀 存在跟 A项目 路由路径一样的情况。

// A项目
projectA: /management/activity-center
// B项目
projectB: /management/activity-center/task

然鹅，qiankun 的路由匹配组件规则是根据 startsWith 方法来匹配的，所以就会导致 A项目 的组件无法正常卸载，影响 B项目 组件的挂载。

解决

1. A项目 与 B项目 的路由前缀不重合不满足 startsWith 方法匹配规则即可。
2. 如果不想动 A项目 与 B项目 的路由，那么在 qiankun 子项目配置中的 activeRule 参数传参上处理下即可

// A项目
activeRule: (activePath: string) => {
    if (location.pathname.includes('/management/activity-center/task')) {
        return false
    } else {
        return true
    }
}