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

前言

接上一篇（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 中配置路由）。

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

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

{  name: 'sub-app-1',  icon: 'smile',  path: '/sub-app-1',  microApp: 'sub-app-1',},

增加子利用路由配置（Mock）

https://github.com/blueju/umi-docs/commit/5f330d5233ebe566c8e4f8c1cc1749e2b4cdcfdf

增加子利用容器

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

import { MicroApp } from 'umi';import React from 'react';function MicroAppLayout() {  return <MicroApp name="sub-app-1" />;}export default MicroAppLayout;

动静装载子利用路由

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

import { dynamic } from 'umi';import LoadingComponent from '@/components/PageLoading';let extraRoutes: object[] = [];export const qiankun = fetch('/api/config')  .then((res) => {    return res.json();  })  .then(({ apps }) => {    return Promise.resolve({      // 注册子利用信息      apps,      // 残缺生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles      lifeCycles: {        afterMount: (props) => {          console.log(props);        },      },      // 反对更多的其余配置，具体看这里 https://qiankun.umijs.org/zh/api/#start-opts    });  });export function patchRoutes({ routes }) {  extraRoutes.forEach((element) => {    routes[1].routes[0].routes.unshift({      name: element.name,      icon: 'smile',      path: element.path,      component: dynamic({        loader: () =>          import(/* webpackChunkName: 'layouts__MicroAppLayout' */ '@/layouts/MicroAppLayout'),        loading: LoadingComponent,      }),    });  });}export async function render(oldRender) {  fetch('/api/config')    .then((res) => {      return res.json();    })    .then((resJson) => {      extraRoutes = resJson.routes;      oldRender();    });}

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] 微前端框架下动静减少微前端路由](https://github.com/umijs/umi/...
运行时配置：patchRoutes动静增加多级路由，子路由没成果。
https://github.com/umijs/umi/issues/5003