react

19.React/高阶/project2/src/pages/Detail.jsx

@@ -1,11 +1,29 @@
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 function Detail() {
     const {ids} = useParams();
-    console.log(ids,'aa')
+    const [searchPrams,setSearchPrams] = useSearchParams();
+    console.log(searchPrams.get('id'),'ww')
+    const navigate = useNavigate();
+    function toList() {
+        navigate({
+            pathname:'/list'
+        },{
+            replace: true
+        })
+        // navigate({
+        //     pathname:'/list',
+        //     search:"?aaa=12"
+        // })
+        // navigate({
+        //     pathname:'/list'
+        // })
+        // navigate("/list")
+    }
     return (
         <div>
             <h1>详情</h1>
-            <h3>当前查询商品是第{ids}个</h3>
+            <h3>当前查询商品是第{searchPrams.get("id")}个</h3>
+            <button onClick={toList}>列表</button>
         </div>
     )
 }

19.React/高阶/project2/src/pages/List.jsx

@@ -28,9 +28,16 @@ function List() {
         <td>￥{item.price}</td>
         <td>{item.count}</td>
         <td>
-            <Link to={{
+            {/* 路由传参  */}
+            {/* <Link to={{
                 pathname: `/detail/${item.id}`
-            }}>去详情</Link>
+            }}>去详情</Link> */}
+            {/* 查询参数 */}
+            {/* <Link to={{
+                pathname: '/detail',
+                search:`?id=${item.id}`
+            }}>去详情</Link> */}
+            <Link to={`/detail?id=${item.id}`}>去详情</Link>
         </td>
     </tr> )
     // console.log

19.React/高阶/project2/src/router/index.js

@@ -27,7 +27,8 @@ const routes = [
         path: '*',
         element:<Error></Error>
     },{
-        path:'/detail/:ids',
+        path:'/detail',
+        // path:'/detail/:ids',
         element: <Detail></Detail>
     }
 ];