支持react18,修复切换角色路由无法更新的问题,移除了部分不必要逻辑

.babelrc.js

@@ -22,6 +22,7 @@ module.exports = {
         development: true,
       },
     ],
+    // "@lingui/babel-preset-react",
     [
       "@babel/preset-typescript"
     ]

README-cn.md

@@ -41,8 +41,5 @@ https://zhuanlan.zhihu.com/p/268890371
 
 https://zhuanlan.zhihu.com/p/141738683
 
-## 使用注意
-
-由于 Antdesign 4 部分组件对react 18 的支持不够理想，使用时暂不建议升级至react18..
 
 致谢：[qiujie8092916](https://github.com/qiujie8092916) 提供typescript版

README.md

@@ -40,8 +40,5 @@ motivation：
 
 https://zhuanlan.zhihu.com/p/141738683
 
-## Documentation
-
-Since some of Ant Design 4's components is not well support for react 18, it is not recommended to upgrade to react 18..
 
 Thanks：[qiujie8092916](https://github.com/qiujie8092916) offer the typescript edition

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antdfront",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "Antdfront is a set of multi tab experimental react microfrontend template",
   "main": "webpack.config.js",
   "scripts": {
@@ -78,25 +78,28 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@lingui/cli": "^3.13.2",
-    "@lingui/macro": "^3.13.2",
+    "@lingui/cli": "^3.13.3",
+    "@lingui/macro": "^3.13.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@svgr/webpack": "^6.2.1",
-    "@types/lodash": "^4.14.181",
+    "@types/lingui__core": "^3.0.0",
+    "@types/lingui__macro": "^3.0.0",
+    "@types/lingui__react": "^3.0.0",
+    "@types/lodash": "^4.14.182",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "@umijs/babel-plugin-auto-css-modules": "^3.5.22",
-    "babel-loader": "^8.2.4",
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@umijs/babel-plugin-auto-css-modules": "^3.5.23",
+    "babel-loader": "^8.2.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-import": "^1.13.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "browserslist": "^4.20.2",
+    "browserslist": "^4.20.3",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "circular-dependency-plugin": "^5.2.2",
     "compression-webpack-plugin": "^9.2.0",
@@ -105,7 +108,7 @@
     "cross-port-killer": "^1.4.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -116,7 +119,7 @@
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -131,7 +134,7 @@
     "jest": "^27.5.1",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "lint-staged": "12.3.7",
+    "lint-staged": "12.4.0",
     "mini-css-extract-plugin": "^2.6.0",
     "mockjs": "^1.1.0",
     "node-sass": "^7.0.1",
@@ -149,11 +152,11 @@
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.12.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.50.0",
+    "sass": "^1.50.1",
     "sass-loader": "^12.6.0",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.7.1",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
@@ -171,31 +174,31 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-card": "^1.19.3",
-    "@ant-design/pro-descriptions": "^1.10.64",
-    "@ant-design/pro-field": "^1.34.3",
-    "@ant-design/pro-form": "^1.63.0",
-    "@ant-design/pro-layout": "^6.34.10",
-    "@ant-design/pro-list": "^1.21.51",
-    "@ant-design/pro-table": "^2.71.4",
+    "@ant-design/pro-card": "^1.20.0",
+    "@ant-design/pro-descriptions": "^1.10.68",
+    "@ant-design/pro-field": "^1.34.6",
+    "@ant-design/pro-form": "^1.65.0",
+    "@ant-design/pro-layout": "^6.36.1",
+    "@ant-design/pro-list": "^1.21.56",
+    "@ant-design/pro-table": "^2.72.1",
     "@babel/runtime": "^7.17.9",
     "@koale/useworker": "^4.0.2",
-    "@lingui/core": "^3.13.2",
-    "@lingui/react": "^3.13.2",
-    "ahooks": "^3.3.0",
-    "antd": "^4.19.5",
+    "@lingui/core": "^3.13.3",
+    "@lingui/react": "^3.13.3",
+    "ahooks": "^3.3.8",
+    "antd": "^4.20.0",
     "classnames": "^2.3.1",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "nano-memoize": "^1.3.0",
-    "nanoid": "^3.3.2",
+    "nanoid": "^3.3.3",
     "qiankun": "^2.7.0",
     "qs": "^6.10.3",
-    "react": "^17.0.0",
+    "react": "^18.0.0",
     "react-avatar-editor": "^12.0.0",
-    "react-dom": "^17.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
-    "recoil": "^0.7.1",
+    "recoil": "^0.7.2",
     "typescript": "^4.6.3",
     "umi-request": "^1.4.0"
   },

src/components/TabRoute/index.tsx

@@ -1,9 +1,9 @@
-import { i18n } from "@lingui/core";
-import { useCreation, useMemoizedFn } from "ahooks";
+
+import { useMemoizedFn } from "ahooks";
 import { Tabs } from "antd";
 import _ from "lodash";
 import memoized from "nano-memoize";
-import React, { Suspense, useRef } from "react";
+import React, { Suspense, useEffect, useRef } from "react";
 // import Lru from "@/utils/lru";
 import type { Location } from "react-router-dom";
 // import { useWhyDidYouUpdate } from 'ahooks';
@@ -72,7 +72,7 @@ const TabRoute: React.FC<Props> = ({ routeConfig, matchPath }) => {
   /*
    * const updateTabList =
    */
-  useCreation(() => {
+  useEffect(() => {
     const tab = tabList.current.get(matchPath);
     const newTab: TabObjectType = {
       name: routeConfig.name,
@@ -136,7 +136,7 @@ const TabRoute: React.FC<Props> = ({ routeConfig, matchPath }) => {
       onEdit={(targetKey) => closeTab(targetKey)}
     >
       {[...tabList.current.values()].map((item) => (
-        <TabPane tab={i18n._(item.name)} key={item.key}>
+        <TabPane tab={item.name} key={item.key}>
           <Suspense fallback={<PageLoading />}>{item.page}</Suspense>
         </TabPane>
       ))}

src/index.tsx

@@ -1,9 +1,9 @@
 import { start } from "qiankun";
-// react 18
-// import * as ReactDOMClient from 'react-dom/client';
 // react 17
 import React,{ Suspense } from "react";
-import ReactDom from "react-dom";
+// import ReactDom from "react-dom";
+// react 18
+import * as ReactDOMClient from 'react-dom/client';
 import PageLoading from "@/components/PageLoading";
 import { BrowserRouter } from "react-router-dom";
 import { RecoilRoot } from "recoil";
@@ -18,26 +18,28 @@ runMock();
 const initalContainer = document.getElementById("root") as Element;
 
 // react 18
-// const root =  ReactDOMClient.createRoot(initalContainer);
-// root.render(
-//   <RecoilRoot>
-//     <BrowserRouter>
-//       <App />
-//     </BrowserRouter>
-//   </RecoilRoot>,
-// );
-
-ReactDom.render(
+const root =  ReactDOMClient.createRoot(initalContainer);
+root.render(
   <RecoilRoot>
     <BrowserRouter>
       <Suspense fallback={<PageLoading />} >
         <App />
       </Suspense>
     </BrowserRouter>
   </RecoilRoot>,
-  initalContainer,
 );
 
+// ReactDom.render(
+//   <RecoilRoot>
+//     <BrowserRouter>
+//       <Suspense fallback={<PageLoading />} >
+//         <App />
+//       </Suspense>
+//     </BrowserRouter>
+//   </RecoilRoot>,
+//   initalContainer,
+// );
+
 if ("serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker

src/layouts/BasicLayout.tsx

@@ -1,6 +1,7 @@
 import ProLayout, { SettingDrawer } from "@ant-design/pro-layout";
 import defaultSettings from "@ant-design/pro-layout/es/defaultSettings";
-import { useCreation, useSafeState } from "ahooks";
+// import { useCreation, useSafeState } from "ahooks";
+import {  useSafeState } from "ahooks";
 import _ from "lodash";
 import memoized from "nano-memoize";
 import React, { Suspense } from "react";
@@ -25,10 +26,11 @@ import styles from "./BasicLayout.less";
 
 // 从config里 把 匹配的信息 调出来
 // 放这因为activekey 在 prolayout 和 tabroute之间共享。
-const pickRoutes = memoized((routes: DynamicRouteType[], pathname: string) => {
+const pickRoutes = memoized((routes: DynamicRouteType[], pathname: string,locale: string) => {
   const matches = matchRoutes(routes, { pathname });
   const routeConfig: any = matches ? matches[matches.length - 1].route : null;
   return {
+    locale, // just for cache
     routeConfig,
     // matchPath: matches ? matches.map(match => _.replace(match.route.path,'/*','')).join('/') : null // 解决下微端/*路径的问题
     matchPath: routeConfig ? _.replace(routeConfig.key, "/*", "") : '',
@@ -57,17 +59,18 @@ const BasicLayout: React.FC = () => {
   //   [orgRoute, locale],
   // );
 
-  const feedToProlayoutRoute = useCreation(() => _.cloneDeep(route), [locale]);
+  // const feedToProlayoutRoute = useCreation(() => _.cloneDeep(route), [locale,route]);
 
-  const { routeConfig, matchPath } = pickRoutes(route, location.pathname);
+  const { routeConfig, matchPath } = pickRoutes(route, location.pathname,locale);
 
   return (
     <div id="prolayout" key="prolayout">
       <ProLayout
         style={{
           height: "100vh",
         }}
-        menuDataRender={() => feedToProlayoutRoute}
+        // menuDataRender={() => feedToProlayoutRoute}
+        menuDataRender={() => route}
         menuItemRender={(item:any, dom:any) => (
           <div
             onClick={() => {

tsconfig.json

@@ -21,6 +21,9 @@
       "@/*": ["./src/*"]
     }
   },
+  "types": [
+    "./node_modules/@lingui/macro/global",
+  ],
   "include": [
     "src/**/*",
     "tests/**/*",

webpack/webpack.config.js

@@ -75,18 +75,18 @@ const { swSrc } = paths;
 
 // const appPackageJson = require(paths.appPackageJson);
 
-// const hasJsxRuntime = (() => {
-//   if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
-//     return false;
-//   }
-
-//   try {
-//     require.resolve("react/jsx-runtime");
-//     return true;
-//   } catch (e) {
-//     return false;
-//   }
-// })();
+const hasJsxRuntime = (() => {
+  // if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
+  //   return false;
+  // }
+
+  try {
+    require.resolve("react/jsx-runtime");
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.