react

21.react/高阶/project4/src/pages/Detail.jsx

@@ -1,4 +1,8 @@
+import { useParams } from "react-router-dom";
+
 function Detail() {
+    const { listId } = useParams();
+    console.log(listId);
     return (
         <h1>详情</h1>
     )

21.react/高阶/project4/src/pages/List.jsx

@@ -1,6 +1,47 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
 function List() {
+    const [list, setList] = useState([
+        {
+            id: 1,
+            title: "娃哈哈",
+            price: 2
+        },
+        {
+            id: 2,
+            title: "泉阳泉",
+            price: 1.5
+        },
+        {
+            id: 3,
+            title: "农夫山泉",
+            price: 2.5
+        },
+        {
+            id: 4,
+            title: "百岁山",
+            price: 5
+        },
+        {
+            id: 5,
+            title: "怡宝",
+            price: 2
+        },
+    ])
     return (
-        <h1>列表</h1>
+        <div>
+            <h1>列表</h1>
+            <ul>
+                {
+                    list.map(item => <li key={item.id}>
+                        {/* <Link to={{
+                            pathname: `/detail/${item.id}`
+                        }}>{item.title}</Link> */}
+                        <Link to={`/detail/${item.id}`}>{item.title}</Link>
+                    </li>)
+                }
+            </ul>
+        </div>
     )
 }
 

21.react/高阶/project4/src/router/index.jsx

@@ -4,6 +4,7 @@ import My from "../pages/My";
 import List from "../pages/List";
 import Error from '../pages/Error';
 import Layout from "../Layout";
+import Detail from "../pages/Detail";
 const routes = [
     {
         path: '/',
@@ -25,6 +26,11 @@ const routes = [
             }
         ]
     },
+    {
+        // listId 商品ID 动态参数
+        path: '/detail/:listId/:title?',
+        element: <Detail />
+    },
     {
         // 兜底路由
         path: '*',