react-router

react/react高阶/React路由.md

@@ -20,4 +20,5 @@ export default router
 通过:import {RouterProvider} from 'react-router-dom';
 在根节点中抛出路由：抛出格式：<RouterProvider router={router} />
 ### 2.嵌套路由
-### 3.动态路由
+### 3.动态路由
+### 4.查询参数

react/react高阶/project1/src/pages/Detail.jsx

@@ -1,10 +1,12 @@
-import {useParams} from 'react-router-dom';
+import {useParams,useSearchParams,useLocation} from 'react-router-dom';
 function Detail() {
     let {productId} = useParams();
+    let [searchParams] = useSearchParams();
+    let {state} = useLocation();
     return (
         <>
             <h1>详情</h1>
-            <p>当前浏览商品的ID是:{productId}</p>
+            <p>当前浏览商品的ID是:{productId || searchParams.get('productId') || state.productId}</p>
         </>
     )
 }

react/react高阶/project1/src/pages/Product.jsx

@@ -1,54 +1,56 @@
-import {useState} from 'react';
-import './Product.css';
-import {Link} from 'react-router-dom';
+import { useState } from "react";
+import "./Product.css";
+import { Link } from "react-router-dom";
 const newList = [
-    {
-        id:11,
-        name:"孙悟空",
-        desc:"我家住在花果山"
-    },
-    {
-        id:22,
-        name:"胡图图",
-        desc:"我家住在翻斗花园"
-    },
-    {
-        id:33,
-        name:"喜羊羊",
-        desc:"我家住在青青草原"
-    }
-]
+  {
+    id: 11,
+    name: "孙悟空",
+    desc: "我家住在花果山",
+  },
+  {
+    id: 22,
+    name: "胡图图",
+    desc: "我家住在翻斗花园",
+  },
+  {
+    id: 33,
+    name: "喜羊羊",
+    desc: "我家住在青青草原",
+  },
+];
 function Product() {
+  let [list] = useState(newList);
 
-    let [list] = useState(newList)
-
-
-    return (
-        <>
-            <table border={1} cellPadding={15}>
-                <thead>
-                <tr>
-                    <th>姓名</th>
-                    <th>描述</th>
-                    <th>操作</th>
-                </tr>
-                </thead>
-                <tbody>
-                    {
-                        list.map((item,index) => (
-                            <tr key={index}>
-                                <td>{item.name}</td>
-                                <td>{item.desc}</td>
-                                <td>
-                                    {/* 动态路由 */}
-                                    <Link to={{pathname:`/product/detail/${item.id}`}}>去详情</Link>
-                                </td>
-                            </tr>
-                        ))
-                    }
-                </tbody>
-            </table>
-        </>
-    )
+  return (
+    <>
+      <table border={1} cellPadding={15}>
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>描述</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((item, index) => (
+            <tr key={index}>
+              <td>{item.name}</td>
+              <td>{item.desc}</td>
+              <td>
+                {/*页面跳转伴随着参数的传递 参数传递？ */}
+                {/*1.路由传参 动态路由 跳转*/}
+                {/* <Link to={{ pathname: `/product/detail/${item.id}` }}>去详情</Link> */}
+                {/*  2.查询参数 */}
+                {/* <Link to={`/product/detail?productId=${item.id}`}>去详情</Link> */}
+                {/* <Link to={{pathname:'/product/detail',search:`?productId=${item.id}`}}>去详情</Link> */}
+                {/* 3.history 中路由传参  state传参*/}
+                <Link to={{pathname:"/product/detail"}} state={{productId: item.id}}>去详情</Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 }
-export default Product;
+export default Product;

react/react高阶/project1/src/router/index.js

@@ -47,6 +47,10 @@ const routes = [
                 // 动态配置路由
                  path: 'product/detail/:productId',
                  element: <Detail/>
+             },
+             {
+                path: 'product/detail',
+                element: <Detail/>
              }
         ]
     }