feat: redirect compatible

.npmrc

@@ -0,0 +1,4 @@
+registry = "https://registry.npmmirror.com"
+
+shamefully-hoist = true
+auto-install-peers = true

README.md

@@ -74,6 +74,10 @@ Pro V5 在架构上有了较大的重构，通过 Umi 的插件机制屏蔽了
 
 最后，实现入口改到了 [app.ts](./src/app.tsx)，通过此入口可查看具体实现，相关 UI 组件较于 V4 基本没有改动。
 
+---
+
+补充说明：由于 V5 开始使用了扁平化的路由，以及当前 `use-switch-tabs` 做了 redirect 的适配，所以在使用页面标签化的功能的时候需要注意 `originalRoutes` 需要处理得当，避免 `isSwitchTab` 判断异常。
+
 ### 基于 `children` 的标签页功能实现从 umi@​2.x 升级到 umi@​3.x 的问题
 
 相关讨论和分析参考 [umijs/umi#4425](https://github.com/umijs/umi/issues/4425)，最终分析得出了导致暂时无法升级的[根本原因](https://github.com/umijs/umi/issues/4425#issuecomment-770360267)，PR [umijs/umi#6101](https://github.com/umijs/umi/pull/6101) 修复了该问题，但需要使用 umi@​3.3.8 以上版本。

config/defaultSettings.ts

@@ -20,6 +20,8 @@ const Settings: Settings = {
   // 拂晓蓝
   primaryColor: '#1890ff',
   layout: 'side',
+  // layout: 'mix',
+  // splitMenus: true,
   contentWidth: 'Fluid',
   fixedHeader: false,
   fixSiderbar: true,

package.json

@@ -7,7 +7,7 @@
     "analyze": "cross-env ANALYZE=1 umi build",
     "build": "umi build",
     "deploy": "npm run build && npm run gh-pages",
-    "dev": "npm run start:dev",
+    "dev": "npm run start",
     "docker-hub:build": "docker build  -f Dockerfile.hub -t  ant-design-pro ./",
     "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
     "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
@@ -57,7 +57,7 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-descriptions": "^1.10.0",
     "@ant-design/pro-form": "^1.52.0",
-    "@ant-design/pro-layout": "^6.32.0",
+    "@ant-design/pro-layout": "^6.38.8",
     "@ant-design/pro-table": "^2.61.0",
     "@umijs/route-utils": "^2.0.0",
     "antd": "^4.17.0",
@@ -72,7 +72,7 @@
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
     "umi": "^3.5.0",
-    "use-switch-tabs": "^0.2.0"
+    "use-switch-tabs": "^0.2.2"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",

src/layouts/SwitchTabsLayout/index.tsx

@@ -18,7 +18,7 @@ import { isSwitchTab } from 'use-switch-tabs';
 import type { SwitchTabsProps } from '@/components/SwitchTabs';
 import SwitchTabs from '@/components/SwitchTabs';
 
-export interface MakeUpRoute extends Route, Pick<RouteConfig, 'follow'> {}
+export interface MakeUpRoute extends Route, Pick<RouteConfig, 'follow' | 'redirect'> {}
 
 /** 根据路由定义中的 name 本地化标题 */
 function localeRoutes(
@@ -31,6 +31,14 @@ function localeRoutes(
   routes.forEach((item) => {
     const { routes: itemRoutes, ...rest } = item;
 
+    if (item.layout === false || item.path?.startsWith('/_demos')) {
+      return;
+    }
+    // 为标签页展示的页面注入 redirect 路由
+    if (item.redirect && item.path !== '/') {
+      result.push(item);
+      return;
+    }
     if (!item.name) {
       return;
     }
@@ -78,9 +86,9 @@ export default function SwitchTabsLayout(props: RouteTabsLayoutProps): JSX.Eleme
 
   const { formatMessage } = useIntl();
   const location = useLocation() as H.Location;
-  const originalRoutes = memoizedOneLocaleRoutes(routes!, formatMessage);
+  const originalTabsRoutes = memoizedOneLocaleRoutes(routes!, formatMessage);
 
-  if (mode && isSwitchTab(location as any, originalRoutes)) {
+  if (mode && isSwitchTab(location as any, originalTabsRoutes)) {
     if (loading) {
       return <PageLoading />;
     }
@@ -89,7 +97,7 @@ export default function SwitchTabsLayout(props: RouteTabsLayoutProps): JSX.Eleme
         <SwitchTabs
           mode={mode}
           {...rest}
-          originalRoutes={originalRoutes}
+          originalRoutes={originalTabsRoutes}
           // animated={false}
         >
           {children}