react day5: 嵌套路由&动态路由

20_React.js_VIP22/day-5/code/react-router-demo/src/components/Header.css

@@ -0,0 +1,19 @@
+.header {
+  height: 58px;
+  font-size: 18px;
+
+  color: #333;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header ul {
+  list-style: none;
+  height: 100%;
+  width: 600px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}

20_React.js_VIP22/day-5/code/react-router-demo/src/components/Header.jsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import './Header.css';
+
+function Header() {
+  return (
+    <div className="header">
+      <ul>
+        <li>
+          <Link to="/">主页</Link>
+        </li>
+        <li>
+          <Link to={{ pathname: '/about' }}>关于</Link>
+        </li>
+        <li>
+          <Link to={{ pathname: '/products' }}>商品</Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Header;

20_React.js_VIP22/day-5/code/react-router-demo/src/layout/index.jsx

@@ -0,0 +1,18 @@
+import Header from '../components/Header';
+import { Outlet } from 'react-router-dom';
+
+function Layout() {
+  return (
+    <div className="layout">
+      <header>
+        <Header />
+      </header>
+      <main style={{ padding: '20px' }}>
+        {/* 渲染子路由组件 */}
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

20_React.js_VIP22/day-5/code/react-router-demo/src/pages/Home.jsx

@@ -1,6 +1,6 @@
 function Home() {
   return (
-    <div>
+    <div className="home">
       <h3>主页</h3>
     </div>
   );

20_React.js_VIP22/day-5/code/react-router-demo/src/pages/ProductDetail.jsx

@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom';
+
+function ProductDetail() {
+  const { productId } = useParams();
+  // console.log(params);
+  return (
+    <div className="detail">
+      <h3>详情页</h3>
+      <p>您正在浏览的商品ID：{productId}</p>
+    </div>
+  );
+}
+
+export default ProductDetail;

20_React.js_VIP22/day-5/code/react-router-demo/src/pages/Products.jsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const initialProducts = [
+  {
+    id: 1,
+    name: '篮球',
+    price: '$29.9',
+    desc: '这是郭老师玩过的篮球，具有巨星风采',
+  },
+  {
+    id: 2,
+    name: '足球',
+    price: '$129.9',
+    desc: '这是郭老师当年勇夺女子足球联赛冠军所用，具有巨星风采！！',
+  },
+];
+
+function Products() {
+  let [products] = useState(initialProducts);
+  return (
+    <div className="products">
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((p, i) => (
+            <tr key={p.id}>
+              <td>{i + 1}</td>
+              <td>{p.name}</td>
+              <td>{p.price}</td>
+              <td>
+                <Link to={{ pathname: `/products/details/${p.id}` }}>详情</Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Products;

20_React.js_VIP22/day-5/code/react-router-demo/src/router/index.js

@@ -1,15 +1,47 @@
 import { createBrowserRouter } from 'react-router-dom';
+import Layout from '../layout';
 import Home from '../pages/Home';
 import About from '../pages/About';
+import Products from '../pages/Products';
+import ProductDetail from '../pages/ProductDetail';
 
+//! 1 基本使用
+// const routes = [
+//   {
+//     path: '/',
+//     element: <Home />,
+//   },
+//   {
+//     path: '/about',
+//     element: <About />,
+//   },
+// ];
+
+//! 2 嵌套路由--统一布局
 const routes = [
   {
     path: '/',
-    element: <Home />,
-  },
-  {
-    path: '/about',
-    element: <About />,
+    element: <Layout />,
+    children: [
+      // 这是索引路由
+      {
+        // path: '',
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: 'about',
+        element: <About />,
+      },
+      {
+        path: '/products',
+        element: <Products />,
+      },
+      {
+        path: '/products/details/:productId',
+        element: <ProductDetail />,
+      },
+    ],
   },
 ];