feat: 增加路由

package.json

@@ -13,13 +13,16 @@
     "@blueprintjs/core": "^5.14.2",
     "@blueprintjs/icons": "^5.14.0",
     "@blueprintjs/table": "^5.2.5",
-    "icons": "link:@blueprintjs\\icons",
+    "@types/react-router-dom": "^5.3.3",
+    "framer-motion": "^11.11.17",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

pnpm-lock.yaml

@@ -17,9 +17,12 @@ importers:
       '@blueprintjs/table':
         specifier: ^5.2.5
         version: 5.2.5(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      icons:
-        specifier: link:@blueprintjs\icons
-        version: link:@blueprintjs/icons
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
+      framer-motion:
+        specifier: ^11.11.17
+        version: 11.11.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
@@ -29,10 +32,16 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-router-dom:
+        specifier: ^5.3.4
+        version: 5.3.4(react@18.3.1)
     devDependencies:
       '@eslint/js':
         specifier: ^9.13.0
         version: 9.15.0
+      '@types/node':
+        specifier: ^22.9.0
+        version: 22.9.0
       '@types/react':
         specifier: ^18.3.12
         version: 18.3.12
@@ -41,7 +50,7 @@ importers:
         version: 18.3.1
       '@vitejs/plugin-react-swc':
         specifier: ^3.5.0
-        version: 3.7.1(vite@5.4.11)
+        version: 3.7.1(vite@5.4.11(@types/node@22.9.0))
       eslint:
         specifier: ^9.13.0
         version: 9.15.0
@@ -62,7 +71,7 @@ importers:
         version: 8.14.0(eslint@9.15.0)(typescript@5.6.3)
       vite:
         specifier: ^5.4.10
-        version: 5.4.11
+        version: 5.4.11(@types/node@22.9.0)
 
 packages:
 
@@ -492,15 +501,27 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/history@4.7.11':
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/node@22.9.0':
+    resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
+
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
   '@types/react-dom@18.3.1':
     resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
 
+  '@types/react-router-dom@5.3.3':
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+
+  '@types/react-router@5.1.20':
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+
   '@types/react@18.3.12':
     resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
 
@@ -754,6 +775,20 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  framer-motion@11.11.17:
+    resolution: {integrity: sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -785,6 +820,12 @@ packages:
   header-case@2.0.4:
     resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
 
+  history@4.10.1:
+    resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
+
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -809,6 +850,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -918,6 +962,9 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-to-regexp@1.9.0:
+    resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -967,6 +1014,16 @@ packages:
       react: ^16.8.0 || ^17 || ^18
       react-dom: ^16.8.0 || ^17 || ^18
 
+  react-router-dom@5.3.4:
+    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
+    peerDependencies:
+      react: '>=15'
+
+  react-router@5.3.4:
+    resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==}
+    peerDependencies:
+      react: '>=15'
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -994,6 +1051,9 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-pathname@3.0.0:
+    resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
+
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1040,6 +1100,12 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1071,6 +1137,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
   upper-case-first@2.0.2:
     resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
 
@@ -1085,6 +1154,9 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  value-equal@1.0.1:
+    resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
+
   vite@5.4.11:
     resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1423,14 +1495,31 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/history@4.7.11': {}
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/node@22.9.0':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/prop-types@15.7.13': {}
 
   '@types/react-dom@18.3.1':
     dependencies:
       '@types/react': 18.3.12
 
+  '@types/react-router-dom@5.3.3':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.3.12
+      '@types/react-router': 5.1.20
+
+  '@types/react-router@5.1.20':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.3.12
+
   '@types/react@18.3.12':
     dependencies:
       '@types/prop-types': 15.7.13
@@ -1517,10 +1606,10 @@ snapshots:
       '@typescript-eslint/types': 8.14.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitejs/plugin-react-swc@3.7.1(vite@5.4.11)':
+  '@vitejs/plugin-react-swc@3.7.1(vite@5.4.11(@types/node@22.9.0))':
     dependencies:
       '@swc/core': 1.9.2
-      vite: 5.4.11
+      vite: 5.4.11(@types/node@22.9.0)
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -1771,6 +1860,13 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  framer-motion@11.11.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      tslib: 2.6.3
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fsevents@2.3.3:
     optional: true
 
@@ -1795,6 +1891,19 @@ snapshots:
       capital-case: 1.0.4
       tslib: 2.6.3
 
+  history@4.10.1:
+    dependencies:
+      '@babel/runtime': 7.26.0
+      loose-envify: 1.4.0
+      resolve-pathname: 3.0.0
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+      value-equal: 1.0.1
+
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   ignore@5.3.2: {}
 
   import-fresh@3.3.0:
@@ -1812,6 +1921,8 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  isarray@0.0.1: {}
+
   isexe@2.0.0: {}
 
   js-tokens@4.0.0: {}
@@ -1919,6 +2030,10 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-to-regexp@1.9.0:
+    dependencies:
+      isarray: 0.0.1
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -1964,6 +2079,30 @@ snapshots:
       react-fast-compare: 3.2.2
       warning: 4.0.3
 
+  react-router-dom@5.3.4(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      history: 4.10.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-router: 5.3.4(react@18.3.1)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
+  react-router@5.3.4(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      history: 4.10.1
+      hoist-non-react-statics: 3.3.2
+      loose-envify: 1.4.0
+      path-to-regexp: 1.9.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 16.13.1
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.0
@@ -1988,6 +2127,8 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
+  resolve-pathname@3.0.0: {}
+
   reusify@1.0.4: {}
 
   rollup@4.27.2:
@@ -2049,6 +2190,10 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  tiny-invariant@1.3.3: {}
+
+  tiny-warning@1.0.3: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -2076,6 +2221,8 @@ snapshots:
 
   typescript@5.6.3: {}
 
+  undici-types@6.19.8: {}
+
   upper-case-first@2.0.2:
     dependencies:
       tslib: 2.6.3
@@ -2092,12 +2239,15 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  vite@5.4.11:
+  value-equal@1.0.1: {}
+
+  vite@5.4.11(@types/node@22.9.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.49
       rollup: 4.27.2
     optionalDependencies:
+      '@types/node': 22.9.0
       fsevents: 2.3.3
 
   warning@4.0.3:

src/App.tsx

@@ -1,34 +1,9 @@
-import { useState } from 'react'
-import { Button, ButtonGroup, AnchorButton } from "@blueprintjs/core";
-import { Cell, Column, Table2 } from "@blueprintjs/table";
-
-const dollarCellRenderer = (rowIndex: number) => (
-  <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
-);
-const euroCellRenderer = (rowIndex: number) => (
-  <Cell>{`€${(rowIndex * 10 * 0.85).toFixed(2)}`}</Cell>
-);
-function App() {
-  const [count, setCount] = useState(0)
+import AppRouter from "@/router/AppRouter"
 
+export default function App() {
   return (
     <>
-      <div className="card">
-        <Button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </Button>
-        <ButtonGroup>
-          <Button icon="database">Queries</Button>
-          <Button icon="function">Functions</Button>
-          <AnchorButton rightIcon="caret-down">Options</AnchorButton>
-        </ButtonGroup>
-      </div>
-      <Table2 numRows={10}>
-        <Column name="Dollars" cellRenderer={dollarCellRenderer} />
-        <Column name="Euros" cellRenderer={euroCellRenderer} />
-      </Table2>
+      <AppRouter></AppRouter>
     </>
   )
 }
-
-export default App

src/effect/index.tsx

@@ -0,0 +1,33 @@
+import { motion } from "framer-motion"
+
+export function OpacityIn({ children, className }: any) {
+    return (
+        <motion.div
+            initial="hidden"
+            animate="visible"
+            className={className}
+            variants={{
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            }
+            }>
+            {children}
+        </motion.div>
+    )
+}
+
+export function LeftIn({ children, className }: any) {
+    return (
+        <motion.div
+            initial="hidden"
+            animate="visible"
+            className={className}
+            variants={{
+                visible: { opacity: 1, x: 0 },
+                hidden: { opacity: 0, x: -100 },
+            }
+            }>
+            {children}
+        </motion.div>
+    )
+}

src/router/AppRouter.tsx

@@ -0,0 +1,54 @@
+import { HashRouter as Router, Switch, Redirect, Route } from "react-router-dom"
+import React, { Fragment } from "react"
+
+import Auth from "./Auth"
+import routes, { Loading } from "./route"
+
+function LoadWrapper(props: any) {
+    if (props.isLazy) {
+        const LoadingComp = props.loading ? props.loading : () => <Loading></Loading> //NormalLoading;
+        return <React.Suspense fallback={<LoadingComp></LoadingComp>}>{props.children}</React.Suspense>
+    }
+    return <Fragment>{props.children}</Fragment>
+}
+
+function RouteMap(props: any) {
+    const routes: any[] = props.routes
+
+    return (
+        <Switch>
+            {routes.map((route, index) => {
+                const { exact = false } = route
+                const isAuth = !!route.meta?.auth
+                if (route.redirect) {
+                    return (
+                        <Auth key={index} needAuth={isAuth} path={route.path} exact={exact}>
+                            <Route key={index} path={route.path} exact={exact}>
+                                <Redirect to={route.redirect}></Redirect>
+                            </Route>
+                        </Auth>
+                    )
+                }
+                if (route.component) {
+                    return (
+                        <Auth key={index} needAuth={isAuth} path={route.path} exact={exact}>
+                            <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
+                                <route.component meta={route.meta}>
+                                    {route.children && <RouteMap routes={route.children}></RouteMap>}
+                                </route.component>
+                            </LoadWrapper>
+                        </Auth>
+                    )
+                }
+            })}
+        </Switch>
+    )
+}
+
+export default function AppRouter() {
+    return (
+        <Router>
+            <RouteMap routes={routes}></RouteMap>
+        </Router>
+    )
+}

src/router/Auth.tsx

@@ -0,0 +1,46 @@
+import { Component } from "react"
+// 高阶组件，就是对原来的组件进行封装
+import { Route, NavLink } from "react-router-dom"
+
+interface IProps {
+    needAuth?: boolean
+    path: string
+    exact?: boolean
+    children: any
+}
+
+class Auth extends Component<IProps, { isLogin: boolean }> {
+    constructor(props: IProps) {
+        super(props)
+        this.state = {
+            isLogin: false
+        }
+    }
+
+    login() {
+        this.setState({
+            isLogin: true
+        })
+    }
+
+    render() {
+        const { path, needAuth = false, exact = false } = this.props
+        if (!needAuth || (needAuth && this.state.isLogin)) {
+            return (
+                // 如果已经登陆，就直接显示原来的组件
+                <Route exact={exact} path={path}>
+                    {this.props.children}
+                </Route>
+            )
+        }
+        return (
+            <div>
+                {/* <NavLink to="/login">你还有没有登陆好吧！</NavLink> */}
+                <div onClick={() => this.setState({ isLogin: true })}>你还有没有登陆好吧！</div>
+                {/* <Redirect to={{ pathname: '/login', state: { from: { path }} }} > </Redirect> */}
+            </div>
+        )
+    }
+}
+
+export default Auth

src/router/index.ts

@@ -0,0 +1,70 @@
+import { useLocation } from "react-router-dom"
+import allRoutes from "./route"
+import Page404 from "@/viewsSys/404/Page404"
+
+export function foundRoute(route: any, name: string, arrIndex?: number[]): any {
+    if (!arrIndex) {
+        arrIndex = []
+    }
+    for (let i = 0; i < route.length; i++) {
+        const element = route[i]
+        if (element.root) {
+            arrIndex = []
+        }
+        arrIndex.push(i)
+        let lena = element.path.split("/").length
+        let lenb = name.split("/").length
+        if (element.path == name && lena == lenb) {
+            return arrIndex
+        } else if (element.children) {
+            let a = foundRoute(element.children, name, arrIndex)
+            if (a) {
+                return a
+            }
+        }
+    }
+}
+
+export default function useRoute() {
+    const routes = allRoutes
+    const { pathname } = useLocation()
+    let oroute = JSON.parse(JSON.stringify(routes))
+    let index = foundRoute(routes, pathname)
+    let isLayout = true
+    let curA = null
+    let curB = null
+    if (index && index.length) {
+        let res = oroute[index[0]]
+        let cur = res
+        for (let i = 1; i < index.length; i++) {
+            const element = index[i]
+            cur.children = [cur.children[element]]
+            cur = cur.children[element]
+        }
+        if (cur) {
+            cur.children = []
+        }
+        if (cur.layout != undefined) {
+            isLayout = !!cur.layout
+        }
+        curA = cur
+        curB = res
+    }
+    if (curA == null) {
+        curA = {
+            path: "*",
+            exact: false,
+            root: true,
+            component: Page404,
+        }
+    }
+    if (curB == null) {
+        curB = {
+            path: "*",
+            exact: false,
+            root: true,
+            component: Page404,
+        }
+    }
+    return [curA, curB]
+}

src/router/route.tsx

@@ -0,0 +1,74 @@
+import Page404 from "@/viewsSys/404/Page404"
+
+import { lazy } from "react"
+
+export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
+
+/**
+ * 延时加载，示例：
+ * lazy(delay(() => import("@/views/Project"), 2000))
+ */
+// let delay =
+//     (Comp: any, duration = 1000) =>
+//         () =>
+//             new Promise<any>(resolve =>
+//                 Comp()
+//                     .then((res: any) => {
+//                         setTimeout(() => {
+//                             resolve(res)
+//                         }, duration)
+//                     })
+//                     .catch((err: Error) => {
+//                         console.error(err);
+//                         resolve({
+//                             default: () => <div>Error</div>,
+//                         })
+//                     }),
+//             )
+
+const routesArray = [
+    {
+        path: "/",
+        exact: true,
+        root: true,
+        redirect: "/project",
+    },
+    {
+        path: "/project",
+        component: lazy(() => import("@/views/Project")),
+        exact: false,
+        loading: () => <Loading color="blue"></Loading>,
+        root: true,
+        meta: {
+            auth: false,
+        },
+        children: [
+            {
+                path: "/project/child",
+                component: lazy(() => import("@/views/Child")),
+                exact: true,
+                loading: () => <Loading color="blue"></Loading>,
+                children: [],
+                meta: {
+                    auth: true,
+                },
+            }
+        ],
+    },
+    {
+        path: "/playground",
+        component: lazy(() => import("@/views/PlayGround")),
+        exact: true,
+        loading: () => <Loading color="blue"></Loading>,
+        root: true,
+        children: [],
+    },
+    {
+        path: "*",
+        exact: false,
+        root: true,
+        component: Page404,
+    },
+]
+
+export default routesArray

src/views/Child.tsx

@@ -0,0 +1,15 @@
+import { Button, Dialog, DialogBody, DialogFooter } from "@blueprintjs/core";
+import { useCallback, useState } from "react";
+
+export default function Child() {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOverlay = useCallback(() => setIsOpen(open => !open), [setIsOpen]);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    return <>
+        <Button text="点击打开美丽的按钮" onClick={toggleOverlay} />
+        <Dialog isOpen={isOpen} title="通知" icon="info-sign" onClose={handleClose}>
+            <DialogBody>{/* body contents here */}</DialogBody>
+            <DialogFooter actions={<Button intent="primary" text="关闭" onClick={handleClose} />} />
+        </Dialog>
+    </>
+}

src/views/PlayGround.tsx

@@ -0,0 +1,6 @@
+
+export default function PlayGround() {
+    return <>
+        <div>PlayGround</div>
+    </>
+}

src/views/Project.tsx

@@ -0,0 +1,13 @@
+
+export default function Project(props: any) {
+    console.log(props);
+
+    return <>
+        <div>
+            Project
+            <div>
+                {props?.children}
+            </div>
+        </div>
+    </>
+}

src/viewsSys/404/Page404.tsx

@@ -0,0 +1,11 @@
+import { LeftIn } from "@/effect"
+
+export default function Page404() {
+    return (
+        <div className="h-1/1 flex">
+            <LeftIn className="m-auto">
+                <img className="p-40px" src="static/404.jpg" alt="" />
+            </LeftIn>
+        </div>
+    )
+}

tsconfig.app.json

@@ -20,7 +20,12 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src"]
 }

vite.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
+import { join } from 'path'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vite.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": join(__dirname, "src"),
+    },
+  },
   plugins: [react()],
 })