react day5: 查询参数&页面导航

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

@@ -17,3 +17,25 @@
   justify-content: space-around;
   align-items: center;
 }
+
+.header ul a {
+  text-decoration: none;
+}
+
+.header ul a:hover {
+  text-decoration: underline;
+}
+
+.actived {
+  color: red;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.pending {
+  color: blue;
+}
+
+.link {
+  color: #3cb371;
+}

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

@@ -1,18 +1,27 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import './Header.css';
 
+const handleLinkStyle = ({ isActive, isPending }) =>
+  isPending ? 'pending' : isActive ? 'actived' : 'link';
+
 function Header() {
   return (
     <div className="header">
       <ul>
         <li>
-          <Link to="/">主页</Link>
+          <NavLink className={handleLinkStyle} to="/">
+            主页
+          </NavLink>
         </li>
         <li>
-          <Link to={{ pathname: '/about' }}>关于</Link>
+          <NavLink className={handleLinkStyle} to={{ pathname: '/about' }}>
+            关于
+          </NavLink>
         </li>
         <li>
-          <Link to={{ pathname: '/products' }}>商品</Link>
+          <NavLink className={handleLinkStyle} to={{ pathname: '/products' }}>
+            商品
+          </NavLink>
         </li>
       </ul>
     </div>

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

@@ -1,12 +1,36 @@
-import { useParams } from 'react-router-dom';
+import {
+  useParams,
+  useLocation,
+  useSearchParams,
+  useNavigate,
+} from 'react-router-dom';
 
 function ProductDetail() {
   const { productId } = useParams();
-  // console.log(params);
+  const { state } = useLocation();
+
+  // const urlSearchParams = new URLSearchParams(location.search);
+
+  let [searchParams] = useSearchParams();
+  const go = useNavigate();
+
   return (
     <div className="detail">
+      {/* <NavLink to="..">Back</NavLink> */}
+      <a
+        href="#"
+        onClick={() => {
+          // go('/products');
+          // go({ pathname: '/products' });
+          go(-1);
+        }}
+      >
+        Back
+      </a>
       <h3>详情页</h3>
-      <p>您正在浏览的商品ID：{productId}</p>
+      <p>
+        您正在浏览的商品ID：{productId || searchParams.get('pid') || state?.pid}
+      </p>
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 const initialProducts = [
   {
@@ -36,7 +36,20 @@ function Products() {
               <td>{p.name}</td>
               <td>{p.price}</td>
               <td>
-                <Link to={{ pathname: `/products/details/${p.id}` }}>详情</Link>
+                {/* 1 路由参数 在页面间传递数据 */}
+                {/* <Link to={{ pathname: `/products/details/${p.id}` }}>详情</Link> */}
+                {/* 2 查询参数 在页面间传递数据 */}
+                {/* <Link to={`/products/detail?pid=${p.id}`}>详情</Link> */}
+                {/* <Link to={{ pathname: '/products/detail', search: '?id=1' }}>
+                  详情
+                </Link> */}
+                {/* 3 history路由中state实现 页面间数据传递 */}
+                <NavLink
+                  to={{ pathname: '/products/detail' }}
+                  state={{ pid: p.id }}
+                >
+                  详情
+                </NavLink>
               </td>
             </tr>
           ))}

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

@@ -41,6 +41,10 @@ const routes = [
         path: '/products/details/:productId',
         element: <ProductDetail />,
       },
+      {
+        path: '/products/detail',
+        element: <ProductDetail />,
+      },
     ],
   },
 ];