xxx

2022-06-13 00:29:23 +08:00
parent a973db6b56
commit 3320d88acf
6 changed files with 81 additions and 7 deletions
@@ -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",
@@ -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",
@@ -7,4 +7,7 @@
   Switch  只匹配第一次
   exact   严格匹配
   Redirect 
-   路由嵌套
+   路由嵌套
+   路由传参
+      params传参,需要声明接收
+      serach传参，无需声明接收
@@ -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>
@@ -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>
@@ -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/car" children="汽车" />
+                    <Link to="/home/news/chenxuan/123" 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>