Umi + qiankun implements dynamically loaded sub-application routing

foreword

Recently, I am doing project refactoring. The original Vue project has dozens of menus, and the project is outrageous, so I am ready to refactor, using the umi+qiankun method, and the sub-application uses two types of vue and react s frame.

need

Because the umi framework is used, the default routing file is uniformly configured under config/routers and is static, but because it is a dynamically added sub-application, if a static routing file is used, each time a new sub-application is added, it is necessary to Modifying the routing file in the main application and publishing it again is obviously unreasonable. Therefore, a solution to dynamic routing was found, which is also the official solution. The configuration method is mainly carried out at runtime. For official documents, see https://umijs.org/zh-CN/docs/runtime-config

configure

• Step 1: Get the sub-application configuration list
  Because it involves the configuration method of the micro-application, the first is to call the interface in app.ts to obtain the information list of the micro-application

   // 后面需要使用
  let globalApp: any[] = [];
  // 获取微应用信息列表
  export const qiankun = getApps().then((data) => {
    const apps = data?.DATA.filter((i: { entry: any }) => i.entry) || [];
  
    const tmp = apps?.map((app: any) => {
        return {
            ...app,
            // 增加一些子应用需要用到变量
            props: {
                globalState: {
                    ...initState,
                },
            },
        };
    });
    globalApp = tmp;
    return {
        apps: tmp,
    };
  });
  
  // 返回的数据结构
  const response = [
    {
        enrty: 'https://10.10.10.10:111',
        name: 'microApp1'
    },
    {
        enrty: 'https://10.10.10.10:222',
        name: 'microApp2'
    }
  ];

• Step 2: Add routing configuration in app.ts
  Also in app.ts, add the patchRoutes configuration. This main function is to dynamically add new routes. The main function is also implemented using this. The specific code is as follows. The extraRoutes here are variables that are defined in advance to store the data obtained from the interface. The router[0] in forEach is to find the specific location to add a new route according to its own routing configuration, and insert a new route into it. Routing configuration.

   let extraRoutes: object[] = [];
  export function patchRoutes({ routes }: any) {
    extraRoutes.forEach((element: any) => {
        routes[0].routes[2].routes[0].routes.unshift({
            name: element.name,
            path: element.path,
            component: dynamic({
                loader: () =>
                    import(
                        /* webpackChunkName: 'layouts__MicroAppLayout' */ '@/layouts/MicroAppLayout'
                    ),
                loading: LoadingComponent,
            }),
        });
    });
  }

• Step 3: Add a Micro Application Component
  In the second step above, we used the component field when we added a new route. If we used static routing, we could directly add a static route in config/routes, such as {name: 'microApp3', path: '/microApp3', microApp: 'microApp3'} , but When using the dynamic method, you cannot directly push such a line, it will not take effect, so you need to use the component method, so here we use the <MicroApp></MicroApp> method to add.
  We create a new file under the layouts folder called MicroAppLayout.tsx with the following content, which is equivalent to encapsulating it into a component and dynamically introducing it through dynamic, and the name will also be automatically passed in through props, so that we will In the second step, you can pass element.name in the list of sub-applications obtained in a loop.

   import React from 'react';
  import { MicroApp } from 'umi';
  
  const MicroAppLayout: React.FC = (props: any) => {
    return (
        <>
            <MicroApp name={props?.route?.name} />
        </>
    );
  };
  export default MicroAppLayout;

• Step 4: Render the new route
  Through the above methods, we have dynamically updated the routing configuration and adapted the micro-application. Next, we only need to re-render it. Add the following code to app.ts. The globalApp is obtained through the interface above. To the list of micro-applications, assign the map to extraRoutes, and then re-render it through oldRender.

   export function render(oldRender: () => void) {
    extraRoutes = globalApp?.map((app: any) => {
        return {
            name: app.name,
            path: '/' + app.name,
        };
    });
    oldRender();
  }

  Summarize

  Through the above methods, we can dynamically add routes according to the return interface of the backend. The local routing configuration file only needs to configure some routes that are commonly used by the main application and hardly change. Of course, not only micro-applications can use this method, if necessary, ordinary routes can also be configured in this way, which saves us the problem of updating the routers file every time we add a new menu.

refer to

https://blog.csdn.net/BLUE_JU/article/details/109467321