study5

react/study5/project/src/components/Header.jsx

@@ -11,7 +11,7 @@ function Header() {
           <Link to={{ pathname: "/about" }}>列表</Link>
         </li>
         <li>
-          <Link to="/about">我的</Link>
+          <Link to="/shop">购物车</Link>
         </li>
       </ul>
     </div>

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

@@ -0,0 +1,11 @@
+import { useParams } from "react-router-dom"
+function Details() {
+    let {shopId} = useParams()
+    return(
+        <div>
+            <h3>详情页</h3>
+            <p>当前页面id是:{shopId}</p>
+        </div>
+    )
+}
+export default Details

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

@@ -0,0 +1,13 @@
+.shop table {
+    width: 80%;
+    height: 300px;
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+    text-align: center;
+}
+.shop table th,.shop table td {
+    border: 1px solid #000;
+}
+.shop {
+    margin-left: 50px;
+}

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

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import './shop.css'
+const list = [
+  {
+    id: 1,
+    name: "孙悟空",
+    age: 20,
+    describe: "金箍棒",
+  },
+  {
+    id: 2,
+    name: "猪八戒",
+    age: 22,
+    describe: "九齿钉耙",
+  },
+  {
+    id: 3,
+    name: "沙和尚",
+    age: 24,
+    describe: "月牙铲",
+  },
+];
+function Shop() {
+  let [newList] = useState(list);
+  return (
+    <div className="shop">
+      <table>
+        <thead>
+          <tr>
+            <th>序号</th>
+            <th>名字</th>
+            <th>年龄</th>
+            <th>武器</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {/* <td>1</td>
+                <td>aaa</td>
+                <td>23</td>
+                <td>121212</td> */}
+          {newList.map((item, index) => (
+            <tr key={index}>
+              <td>{index + 1}</td>
+              <td>{item.name}</td>
+              <td>{item.age}</td>
+              <td>{item.describe}</td>
+              <td>
+                <Link to={{pathname:`/shop/details/${item.id}`}}>详情</Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+export default Shop;

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

@@ -2,6 +2,8 @@ import {createBrowserRouter} from "react-router-dom";
 import Home from '../pages/Home';
 import About from '../pages/About';
 import Layout from "../layout/layout";
+import Shop from '../pages/shop.jsx'
+import Details from "../pages/details";
 const route = [
     // 页面路由
     {
@@ -16,6 +18,15 @@ const route = [
             {
                 path:'about',
                 element:<About/>
+            },
+            {
+                path:'shop',
+                element:<Shop/>
+            }, 
+            // 动态传参
+            {
+                path:'shop/details/:shopId',
+                element:<Details/>
             }
         ]
     }