前言

接上一篇（https://www.yuque.com/blueju/blog/gtgndg），上一篇中使用的都是运行时动态注册子应用，子应用路由仍然是写死的、非动态获取。 然后真实项目中除了需要动态注册子应用，还很有可能需要动态装载子应用（路由），比如说：不同权限的用户需要给予他们不同的路由。 此篇 blog 的代码是基于上一篇进行改动的，上一篇 blog 中的代码对应的 GitHub 地址是：https://github.com/blueju/umi-mirror-docs/tree/runtime-dynamic-register-sub-app

子应用

为了体现出现演示效果，我们先为子应用添加两个新页面和新路由，如下图：

路由代码

页面代码 copy 自 pages/index.tsx

主应用

根据官网文档：

https://umijs.org/zh-CN/plugins/plugin-qiankun#a-使用路由绑定的方式

我们知道，动态装载子应用（路由）的方式有两种，

一是在 config/config.ts 中配置路由
二是类似 React 使用组件路由

在这里，我可以明确地告诉大家，截止目前（2020年9月6日17点51分），动态装载子应用（路由）无法使用第一种方式（在 config/config.ts 中配置路由）。 <a name="KprK6"></a>

删除之前写死的子应用（路由）装载

在 config/config.ts 中删除之前写的以下子应用（路由）装载配置：

1{
2  name: 'sub-app-1',
3  icon: 'smile',
4  path: '/sub-app-1',
5  microApp: 'sub-app-1',
6},

添加子应用路由配置（Mock）

https://github.com/blueju/umi-docs/commit/5f330d5233ebe566c8e4f8c1cc1749e2b4cdcfdf <a name="B9tXn"></a>

添加子应用容器

https://github.com/blueju/umi-docs/commit/849d9f3dbe930a092938334e66d51568ed873fe3 在 src/layouts 下新建一个叫 MicroAppLayout.tsx 的文件

1import { MicroApp } from 'umi';
2import React from 'react';
3
4function MicroAppLayout() {
5  return <MicroApp name="sub-app-1" />;
6}
7
8export default MicroAppLayout;

动态装载子应用路由

在 src/app.tsx 下新建 app.tsx 文件，代码为：

1import { dynamic } from 'umi';
2import LoadingComponent from '@/components/PageLoading';
3
4let extraRoutes: object[] = [];
5
6export const qiankun = fetch('/api/config')
7  .then((res) => {
8    return res.json();
9  })
10  .then(({ apps }) => {
11    return Promise.resolve({
12      // 注册子应用信息
13      apps,
14      // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
15      lifeCycles: {
16        afterMount: (props) => {
17          console.log(props);
18        },
19      },
20      // 支持更多的其他配置，详细看这里 https://qiankun.umijs.org/zh/api/#start-opts
21    });
22  });
23
24export function patchRoutes({ routes }) {
25  extraRoutes.forEach((element) => {
26    routes[1].routes[0].routes.unshift({
27      name: element.name,
28      icon: 'smile',
29      path: element.path,
30      component: dynamic({
31        loader: () =>
32          import(/* webpackChunkName: 'layouts__MicroAppLayout' */ '@/layouts/MicroAppLayout'),
33        loading: LoadingComponent,
34      }),
35    });
36  });
37}
38
39export async function render(oldRender) {
40  fetch('/api/config')
41    .then((res) => {
42      return res.json();
43    })
44    .then((resJson) => {
45      extraRoutes = resJson.routes;
46      oldRender();
47    });
48}
49

Github

https://github.com/blueju/umi-docs/tree/runtime-dynamic-load-sub-app-router 参考： https://github.com/ant-design/ant-design-pro/issues/5909 如何从服务端获取菜单数据及权限校验 umi 运行时配置 Antd Design Pro 中如何动态获取路由替换掉config/route.config.js antd pro 动态菜单与动态路由 是否真的不支持动态路由 [Feature Request] 微前端框架下动态增加微前端路由 运行时配置：patchRoutes动态添加多级路由，子路由没效果。 https://github.com/umijs/umi/issues/5003

umi +qiankun 主应用动态装载子应用（路由）解决方案

前言

子应用

主应用

删除之前写死的子应用（路由）装载

添加子应用路由配置（Mock）

添加子应用容器

动态装载子应用路由

Github

评论区

相关推荐