react

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

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+function Detail() {
+    const {ids} = useParams();
+    console.log(ids,'aa')
+    return (
+        <div>
+            <h1>详情</h1>
+            <h3>当前查询商品是第{ids}个</h3>
+        </div>
+    )
+}
+export default Detail;

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

@@ -0,0 +1,6 @@
+function Error() {
+    return (
+        <h1>当前页面不存在！！！</h1>
+    )
+}
+export default Error;

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

@@ -1,6 +1,57 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+    const initState = [
+        {
+            id:1,
+            name:'橘子',
+            price:5,
+            count:2
+        },
+        {
+            id:2,
+            name:'蓝莓',
+            price:23,
+            count:32
+        },
+        {
+            id:3,
+            name:'榴莲',
+            price:65,
+            count:5
+        },
+    ]
 function List() {
+    let [fruit,setFruit] = useState(initState);
+    const renderList = () => fruit.map((item,index) => <tr key={item.id}>
+        <td>{index + 1}</td>
+        <td>{item.name}</td>
+        <td>￥{item.price}</td>
+        <td>{item.count}</td>
+        <td>
+            <Link to={{
+                pathname: `/detail/${item.id}`
+            }}>去详情</Link>
+        </td>
+    </tr> )
+    // console.log
     return <div>
         <h1>列表</h1>
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Name</th>
+                        <th>Price</th>
+                        <th>Num</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                        {renderList()}
+                </tbody>
+            </table>
+        </div>
     </div>
 }
 export default List;

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

@@ -3,6 +3,8 @@ import Home from "../pages/Home";
 import List from "../pages/List";
 import My from "../pages/My";
 import Layout from "../layout";
+import Error from "../pages/Error";
+import Detail from "../pages/Detail";
 const routes = [
     {
         path: '/',
@@ -21,6 +23,12 @@ const routes = [
                 element: <My></My>
             },
         ]
+    }, {
+        path: '*',
+        element:<Error></Error>
+    },{
+        path:'/detail/:ids',
+        element: <Detail></Detail>
     }
 ];