fix: microApp route mode default prepend (#11345)

* fix: microApp route mode default prepend * chore: better typings and docs
umijs · Jun 30, 2023 · fb17755 · fb17755
1 parent 4a60bc5
commit fb17755
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 9 deletions.
diff --git a/examples/qiankun-master/app.ts b/examples/qiankun-master/app.ts
@@ -11,6 +11,10 @@ export const qiankun = {
         microApp: 'slave',
         mode: 'match',
       },
+      {
+        path: '/prefix',
+        microApp: 'slave',
+      },
     ],
   },
 };
diff --git a/examples/qiankun-slave/cypress/e2e/example.cy.ts b/examples/qiankun-slave/cypress/e2e/example.cy.ts
@@ -54,6 +54,14 @@ describe('QianKun Plugin', () => {
     });
   });
 
+  describe('microApp route prepend ok', () => {
+    it('hit microApp route', () => {
+      cy.visit('/prefix/nav');
+
+      cy.contains('goto slave app2');
+    });
+  });
+
   describe('MicroAppLink crossing multi apps', function () {
     it('jump between slave and slave-app2', () => {
       cy.visit('/slave/nav');

diff --git a/packages/plugins/libs/qiankun/master/common.ts b/packages/plugins/libs/qiankun/master/common.ts
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { Navigate, type IRouteProps } from 'umi';
+import { defaultMicroAppRouteMode, MicroAppRouteMode } from './constants';
 import { getMicroAppRouteComponent } from './getMicroAppRouteComponent';
 import type { MicroAppRoute } from './types';
 
@@ -70,8 +71,9 @@ export function patchMicroAppRoute(
       }
     }
 
+    const { mode = defaultMicroAppRouteMode } = route;
     // 在前缀模式下，自动追加通配符，匹配子应用的路由
-    if (route.mode === 'prepend' && !route.path.endsWith('/*')) {
+    if (mode === MicroAppRouteMode.PREPEND && !route.path.endsWith('/*')) {
       route.path = route.path.replace(/\/?$/, '/*');
     }
 

diff --git a/packages/plugins/libs/qiankun/master/constants.ts b/packages/plugins/libs/qiankun/master/constants.ts
@@ -5,3 +5,15 @@ export const defaultMasterRootId = 'root-master';
 export const defaultHistoryType = 'browser';
 export const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
 export const qiankunStateFromMasterModelNamespace = '@@qiankunStateFromMaster';
+export enum MicroAppRouteMode {
+  /**
+   * 既作为匹配规则，也作为子应用 router.basename
+   */
+  PREPEND = 'prepend',
+  /**
+   * 仅作为匹配规则
+   */
+  MATCH = 'match',
+}
+
+export const defaultMicroAppRouteMode = MicroAppRouteMode.PREPEND;
diff --git a/packages/plugins/libs/qiankun/master/getMicroAppRouteComponent.tsx.tpl b/packages/plugins/libs/qiankun/master/getMicroAppRouteComponent.tsx.tpl
@@ -1,23 +1,24 @@
 import React from 'react';
 import { useMatch } from 'umi';
 import { MicroApp } from './MicroApp';
+import { defaultMicroAppRouteMode, MicroAppRouteMode } from './constants';
 
 export function getMicroAppRouteComponent(opts: {
   appName: string;
   base: string;
   routePath: string;
-  routeMode: 'match' | 'prepend';
+  routeMode: MicroAppRouteMode;
   masterHistoryType: string;
   routeProps?: any;
 }) {
-  const { base, masterHistoryType, appName, routeProps, routePath, routeMode = 'prepend' } = opts;
+  const { base, masterHistoryType, appName, routeProps, routePath, routeMode = defaultMicroAppRouteMode } = opts;
   const RouteComponent = () => {
     const match = useMatch(routePath);
     const url = match ? match.pathnameBase : '';
     // 默认取静态配置的 base
     let umiConfigBase = base === '/' ? '' : base;
     // 匹配模式下，routePath 不会作为 prefix
-    const prefix = routeMode === 'match' ? '' : (url.endsWith('/') ? url.substr(0, url.length - 1) : url);
+    const prefix = routeMode === MicroAppRouteMode.MATCH ? '' : (url.endsWith('/') ? url.substr(0, url.length - 1) : url);
 
     // 拼接子应用挂载路由
     let runtimeMatchedBase = umiConfigBase + prefix;

diff --git a/packages/plugins/libs/qiankun/master/types.ts b/packages/plugins/libs/qiankun/master/types.ts
@@ -1,6 +1,7 @@
 // @ts-nocheck
 /* eslint-disable */
 import { FrameworkConfiguration, FrameworkLifeCycles } from 'qiankun';
+import type { MicroAppRouteMode } from './constants';
 
 type BaseIConfig = any;
 
@@ -18,11 +19,7 @@ export type App = {
 export type MicroAppRoute = {
   path: string;
   microApp: string;
-  /**
-   * prepend 既作为匹配规则，也作为子应用 router.basename
-   * match 仅作为匹配规则
-   */
-  mode: 'match' | 'prepend';
+  mode: `${MicroAppRouteMode}`;
 } & Record<string, any>;
 
 export type MasterOptions = {