feat: upgrade React to version 19

package.json

@@ -4,21 +4,21 @@
   "private": true,
   "dependencies": {
     "@emotion/core": "^11.0.0",
-    "@emotion/react": "^11.5.0",
-    "@reduxjs/toolkit": "^1.4.0",
+    "@emotion/react": "^11.7.0",
+    "@reduxjs/toolkit": "^2.8.2",
     "antd": "^5.0.2",
     "axios": "^0.24.0",
     "driver.js": "^0.9.8",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "query-string": "^7.0.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-intl": "^5.23.0",
-    "react-redux": "^7.2.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-intl": "^7.1.11",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.0.0",
-    "recharts": "^2.1.13"
+    "recharts": "^3.1.2"
   },
   "scripts": {
     "dev": "vite",
@@ -45,8 +45,8 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@types/mockjs": "^1.0.2",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.1",
     "@types/react-redux": "^7.1.20",
     "@types/recharts": "^1.8.13",
     "@types/webpack-env": "^1.15.0",
@@ -62,7 +62,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "less": "^4.1.2",
     "prettier": "^2.4.1",
-    "typescript": "^4.3.2",
+    "typescript": "^5.9.2",
     "vite": "^2.6.4",
     "vite-plugin-imp": "^2.0.10",
     "vite-plugin-svgr": "^0.6.0"

src/App.tsx

@@ -8,9 +8,9 @@ import { Suspense, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { HistoryRouter, history } from '@/routes/history';
+import { history, HistoryRouter } from '@/routes/history';
 
-import { LocaleFormatter, localeConfig } from './locales';
+import { localeConfig, LocaleFormatter } from './locales';
 import RenderRouter from './routes';
 import { setGlobalState } from './stores/global.store';
 

src/main.tsx

@@ -1,15 +1,17 @@
 import './styles/index.less';
 import './mock';
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import App from './App';
 import store from './stores';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root'),
 );

src/pages/layout/tagView/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { Tabs } from 'antd';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation,  } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { addTag, removeTag, setActiveTag } from '@/stores/tags-view.store';
 

src/pages/layout/tagView/tagViewAction.tsx

@@ -37,7 +37,11 @@ const TagsViewAction: FC = () => {
           },
           {
             key: '4',
-            label: <Link to="/"><LocaleFormatter id="tagsView.operation.dashboard" /></Link>,
+            label: (
+              <Link to="/">
+                <LocaleFormatter id="tagsView.operation.dashboard" />
+              </Link>
+            ),
           },
         ],
       }}

src/stores/tags-view.store.ts

@@ -1,9 +1,10 @@
 import type { TagItem, TagState } from '@/interface/layout/tagsView.interface';
-import { history } from '@/routes/history';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
 import { createSlice } from '@reduxjs/toolkit';
 
+import { history } from '@/routes/history';
+
 const initialState: TagState = {
   activeTagId: location.pathname,
   tags: [],
@@ -15,15 +16,14 @@ const tagsViewSlice = createSlice({
   reducers: {
     setActiveTag(state, action: PayloadAction<string>) {
       state.activeTagId = action.payload;
-      history.push(state.activeTagId)
+      history.push(state.activeTagId);
     },
     addTag(state, action: PayloadAction<TagItem>) {
       if (!state.tags.find(tag => tag.path === action.payload.path)) {
         state.tags.push(action.payload);
       }
 
       state.activeTagId = action.payload.path;
-
     },
     removeTag(state, action: PayloadAction<string>) {
       const targetKey = action.payload;
@@ -52,12 +52,12 @@ const tagsViewSlice = createSlice({
         }
       }
 
-      history.push(state.activeTagId)
+      history.push(state.activeTagId);
     },
     removeAllTag(state) {
       state.activeTagId = state.tags[0].path;
       state.tags = [state.tags[0]];
-      history.push(state.activeTagId)
+      history.push(state.activeTagId);
     },
     removeOtherTag(state) {
       const activeTag = state.tags.find(tag => tag.path === state.activeTagId);