xxx

demo/route/package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "query-string": "^7.1.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^5.3.3",
@@ -7119,6 +7120,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -12536,6 +12545,20 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13718,6 +13741,14 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -13760,6 +13791,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -20860,6 +20899,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
     "finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -24897,6 +24941,17 @@
         "side-channel": "^1.0.4"
       }
     },
+    "query-string": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -25835,6 +25890,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -25870,6 +25930,11 @@
       "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",

demo/route/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "query-string": "^7.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^5.3.3",

demo/route/read.text

@@ -7,4 +7,7 @@
    Switch  只匹配第一次
    exact   严格匹配
    Redirect 
-   路由嵌套
+   路由嵌套
+   路由传参
+      params传参,需要声明接收
+      serach传参，无需声明接收

demo/route/src/components/child/car.jsx

@@ -1,12 +1,15 @@
 /*
  * @Author: chenxuan
  * @Date: 2022-06-05 16:55:35
- * @LastEditTime: 2022-06-05 17:17:40
+ * @LastEditTime: 2022-06-12 23:55:03
  * @LastEditors: chenxuan
  */
+import queryString from 'query-string';
 import React,{Component} from 'react'
 class Car extends Component{
     render(){
+        let {search}=this.props.location
+        console.log(queryString.parse(search))
         return (
             <div>
                 <h2>this is  CAR</h2>

demo/route/src/components/child/news.jsx

@@ -1,12 +1,14 @@
 /*
  * @Author: chenxuan
  * @Date: 2022-06-05 16:55:28
- * @LastEditTime: 2022-06-05 17:17:33
+ * @LastEditTime: 2022-06-12 23:12:06
  * @LastEditors: chenxuan
  */
 import React,{Component} from 'react'
 class New extends Component{
     render(){
+        const {name,id}=this.props.match.params
+        console.log(name,id)
         return(
             <div>
                 <h2>this is  New</h2>

demo/route/src/components/home.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: chenxuan
  * @Date: 2022-05-22 22:25:38
- * @LastEditTime: 2022-06-05 17:25:42
+ * @LastEditTime: 2022-06-12 23:18:11
  * @LastEditors: chenxuan
  */
 import React,{Component} from 'react'
@@ -15,13 +15,13 @@ class Home extends Component{
             <div className='home'>
                 <h1>this is Home</h1>
                 <ul className='homeNav'>
-                    <Link to="/home/news" children="新闻"/>
+                    <Link to="/home/news/chenxuan/123" children="新闻"/>
-                    <Link to="/home/car" children="汽车" />
+                    <Link to="/home/car/?name=chenxuan&id=123456" children="汽车" />
                     <Link to="/home/money" children="财经" />
                 </ul>
                 <div className='homeContent'>
+                    <Route path="/home/news/:name/:id" component={New} />
                     <Route path="/home/car" component={Car} />
-                    <Route path="/home/news" component={New} />
                     <Route path="/home/money" component={Money} />
                     <Redirect to="/home/car" />
                 </div>