Fri Jun 28 14:58:00 CST 2024 inscode

index.js

-const { pathToRegexp, match } = require("path-to-regexp");
+const { matchRoutes } = require("react-router-dom");
 
 
 console.log("欢迎来到 InsCode");
-// express 的路由匹配使用的 path-to-regexp 库.
-// 我们可以在这里测试它的匹配情况.
 
-// path-to-regexp 中有一个 match 函数.
-// 比如我定义了一个 /about 路由, 可以测试它的匹配情况.
-const fn = match("/about", { decode: decodeURIComponent });
+// 我们在这里测试 matchRoutes 方法.
 
-console.log('fn1', !!fn('/about/')) // true
-console.log('fn1', !!fn('/about/1')) // false
+const routes = [
+  {
+    id: '@@/global-layout',
+    path: '/',
+    children: [
+      {
+        id: 'about/form/index',
+        path: 'about/form',
+      },
+      {
+        id: 'about/index',
+        path: 'about',
+      },
+      {
+        id: 'index',
+        path: '/',
+      },
+    ],
+  },
+];
 
-const fn2 = match("/about/*", { decode: decodeURIComponent });
+const ret = matchRoutes(routes, '/base/about', '/base')
 
-console.log('fn2', !!fn2('/about')) // false
-console.log('fn2', !!fn2('/about/')) // true
-console.log('fn2', !!fn2('/about/1')) // false
\ No newline at end of file
+
+console.log('匹配结果', ret)

package.json

@@ -13,6 +13,9 @@
     "dependencies": {
         "@types/node": "^18.0.6",
         "node-fetch": "^3.2.6",
-        "path-to-regexp": "^7.0.0"
+        "path-to-regexp": "^7.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "6.3.0"
     }
 }