study5

react/study5/project/src/pages/details.jsx

@@ -1,10 +1,18 @@
 import { useParams } from "react-router-dom"
+import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
 function Details() {
+    // 动态传参接受
     let {shopId} = useParams()
+    // 查询参数
+    let [useDetail] = useSearchParams()
+    // history
+    let {state} = useLocation()
     return(
         <div>
             <h3>详情页</h3>
-            <p>当前页面id是:{shopId}</p>
+            <p>当前页面id是:{shopId || useDetail.get("detailsId") || state.ids}</p>
         </div>
     )
 }

react/study5/project/src/pages/shop.jsx

@@ -47,7 +47,13 @@ function Shop() {
               <td>{item.age}</td>
               <td>{item.describe}</td>
               <td>
-                <Link to={{pathname:`/shop/details/${item.id}`}}>详情</Link>
+                {/* 1.动态传参 */}
+                {/* <Link to={{pathname:`/shop/details/${item.id}`}}>详情</Link> */}
+                {/* 2.参数查询 */}
+                {/* <Link to={`/shop/details?detailsId=${item.id}`}>详情</Link> */}
+                {/* <Link to={{pathname:'/shop/details',search:`?detailsId=${item.id}`}}>详情</Link> */}
+                {/* 3.history */}
+                <Link to={{pathname:'/shop/details'}} state={{ids:item.id}}>详情</Link>
               </td>
             </tr>
           ))}

react/study5/project/src/router/index.js

@@ -27,6 +27,10 @@ const route = [
             {
                 path:'shop/details/:shopId',
                 element:<Details/>
+            },
+            {
+                path:'shop/details',
+                element:<Details/>
             }
         ]
     }