reacr-router

react/react高阶/React路由.md

@@ -19,4 +19,5 @@ export default router
 5.在index.js页面中注入路由
 通过:import {RouterProvider} from 'react-router-dom';
 在根节点中抛出路由：抛出格式：<RouterProvider router={router} />
-### 2.嵌套路由
+### 2.嵌套路由
+### 3.动态路由

react/react高阶/project1/src/components/Header.jsx

@@ -8,7 +8,10 @@ function Header() {
                     <Link to={{pathname:'/'}}>首页</Link>
                 </li>
                 <li>
-                    <Link to={{pathname:"/about"}}>相关页</Link>
+                    <Link to={{pathname:"/about"}}>相关</Link>
+                </li>
+                <li>
+                    <Link to={{pathname:"/product"}}>商品</Link>
                 </li>
             </ul>
         </>

react/react高阶/project1/src/index.js

@@ -2,9 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
-// 
-import router from './router';
 import {RouterProvider} from 'react-router-dom';
+import router from './router';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

react/react高阶/project1/src/pages/Detail.jsx

@@ -0,0 +1,11 @@
+import {useParams} from 'react-router-dom';
+function Detail() {
+    let {productId} = useParams();
+    return (
+        <>
+            <h1>详情</h1>
+            <p>当前浏览商品的ID是:{productId}</p>
+        </>
+    )
+}
+export default Detail;

react/react高阶/project1/src/pages/Product.css

@@ -0,0 +1,6 @@
+th, td {
+    padding: 15px;
+}
+* {
+    font-size: 16px;
+}

react/react高阶/project1/src/pages/Product.jsx

@@ -0,0 +1,54 @@
+import {useState} from 'react';
+import './Product.css';
+import {Link} from 'react-router-dom';
+const newList = [
+    {
+        id:11,
+        name:"孙悟空",
+        desc:"我家住在花果山"
+    },
+    {
+        id:22,
+        name:"胡图图",
+        desc:"我家住在翻斗花园"
+    },
+    {
+        id:33,
+        name:"喜羊羊",
+        desc:"我家住在青青草原"
+    }
+]
+function Product() {
+
+    let [list] = useState(newList)
+
+
+    return (
+        <>
+            <table border={1} cellPadding={15}>
+                <thead>
+                <tr>
+                    <th>姓名</th>
+                    <th>描述</th>
+                    <th>操作</th>
+                </tr>
+                </thead>
+                <tbody>
+                    {
+                        list.map((item,index) => (
+                            <tr key={index}>
+                                <td>{item.name}</td>
+                                <td>{item.desc}</td>
+                                <td>
+                                    {/* 动态路由 */}
+                                    <Link to={{pathname:`/product/detail/${item.id}`}}>去详情</Link>
+                                </td>
+                            </tr>
+                        ))
+                    }
+                </tbody>
+            </table>
+        </>
+    )
+}
+export default Product;

react/react高阶/project1/src/router/index.js

@@ -4,6 +4,8 @@ import {createBrowserRouter} from 'react-router-dom';
 import Home from '../pages/Home';
 import About from '../pages/About';
 import Layout from '../layout/index'
+import Product from '../pages/Product'
+import Detail from '../pages/Detail'
 // const router = createBrowserRouter([
 //     {
 //        /**
@@ -36,6 +38,15 @@ const routes = [
              {
                  path: 'about',
                  element: <About/>
+             },
+             {
+                 path: 'product',
+                 element: <Product/>
+             },
+             {
+                // 动态配置路由
+                 path: 'product/detail/:productId',
+                 element: <Detail/>
              }
         ]
     }