react

20.react/高阶/my-router/src/layout/index.jsx

@@ -10,7 +10,7 @@ function Layout() {
             <header>
                 <nav>
                     <NavLink className={handleLinkStyle} to="/">首页</NavLink>
-                    <NavLink className={handleLinkStyle} to="/list">列表</NavLink>
+                    <NavLink className={handleLinkStyle} to={{pathname:'/list'}}>列表</NavLink>
                     <NavLink className={handleLinkStyle} to="/my">我的</NavLink>
                 </nav>
             </header>

20.react/高阶/my-router/src/pages/Detail.jsx

@@ -0,0 +1,15 @@
+import { useSearchParams,useParams } from "react-router-dom";
+function Detail() {
+     let [searchParams] = useSearchParams();
+     let { id,name } = useParams();
+     console.log(id,name,useParams(),'哈哈')
+    console.log(searchParams.get('desc'))
+    console.log(useSearchParams())
+    return (
+        <div>
+            <h1>详情</h1>
+        </div>
+    )
+}
+
+export default Detail;

20.react/高阶/my-router/src/pages/Home.jsx

@@ -1,4 +1,8 @@
+import { useLocation } from "react-router-dom";
+
 function Home() {
+    const location = useLocation();
+    console.log(location)
     return (
         <div>
             首页

20.react/高阶/my-router/src/pages/List.jsx

@@ -1,7 +1,54 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 function List() {
+    const navgiate = useNavigate();
+    const [main,setMain] = useState([
+        {
+            id:1,
+            name:'孙悟空',
+            desc:"金箍棒"
+        },
+        {
+            id:2,
+            name:'哪吒',
+            desc:"混天绫"
+        },
+        {
+            id:3,
+            name:'猪八戒',
+            desc:"九齿钉耙"
+        }
+    ])
+    // const [name1] = useState("")
     return (
         <div>
-            列表
+            <h1>列表</h1>
+            <button onClick={()=>{
+                // navgiate('/')
+                // navgiate({
+                //     pathname:'/'
+                // })
+                navgiate({
+                    pathname:'/',
+                    search:`?name=12`
+                },{
+                    replace:true,
+                    state:{
+                        id:"12"
+                    }
+                })
+            }}>去首页</button>
+            <ul >
+                {
+                    main.map((item)=><Link key={item.id} to={`/detail/${item.id}/${item.name}`}><li>{item.name}</li></Link>)
+                    // main.map((item)=><Link key={item.id} to={{
+                    //     pathname:'/detail',
+                    //     search:`?desc=${item.name}`
+                    // }}><li>{item.name}</li></Link>)
+                    // main.map((item)=><Link key={item.id} to={`/detail?id=${item.id}&desc=${item.desc}`}><li>{item.name}</li></Link>)
+                    // main.map((item)=><Link key={item.id} to={{pathname:`/detail?id=${item.id}&desc=${item.desc}`}}><li>{item.name}</li></Link>)
+                }
+            </ul>
         </div>
     )
 }

20.react/高阶/my-router/src/router/index.js

@@ -4,6 +4,7 @@ import Home from '../pages/Home';
 import List from '../pages/List';
 import My from '../pages/My';
 import Layout from "../layout";
+import Detail from "../pages/Detail";
 
 const router = createBrowserRouter([
     {
@@ -25,7 +26,15 @@ const router = createBrowserRouter([
                 element: <My></My>
             },
         ]
+    },
+    {
+        path:'/detail/:id/:name',
+        element: <Detail/>
     }
+    // {
+    //     path:'/detail',
+    //     element: <Detail/>
+    // }
 ])
 
 export default router;