react

21.react/高阶/project4/src/Layout/index.jsx

@@ -22,12 +22,15 @@ function Layout() {
                 <NavLink to='/' style={({ isActive, isPending }) => ({
                     color: isPending ? "#f00" : isActive ? "#ff0" : "#00f"
                 })} end>首页</NavLink>
-                <NavLink to='/list' style={({ isActive, isPending }) => ({
+                <NavLink to={{
+                    pathname: '/list',
+                    search: '?ids=12'
+                }} style={({ isActive, isPending }) => ({
                     color: isPending ? "#f00" : isActive ? "#ff0" : "#00f"
                 })}>列表</NavLink>
                 <NavLink to='/my' style={({ isActive, isPending }) => ({
                     color: isPending ? "#f00" : isActive ? "#ff0" : "#00f"
-                })}>我的</NavLink>
+                })} state={{ from: '我的' }}>我的</NavLink>
             </header>
             <main>
                 <Outlet></Outlet>

21.react/高阶/project4/src/main.jsx

@@ -1,13 +1,13 @@
-import { StrictMode } from 'react'
+// import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 // import './index.css'
 import router from './router/index.jsx'
 import { RouterProvider } from 'react-router-dom';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <RouterProvider router={router}>
-      {/* 把路由注入到整个应用  RouterProvider会根据当前的URL 自动渲染匹配的组件*/}
-    </RouterProvider>
-  </StrictMode>,
+  // <StrictMode>  </StrictMode>
+  <RouterProvider router={router}>
+    {/* 把路由注入到整个应用  RouterProvider会根据当前的URL 自动渲染匹配的组件*/}
+  </RouterProvider>
+
 )

21.react/高阶/project4/src/pages/Detail.jsx

@@ -1,8 +1,17 @@
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 
 function Detail() {
     const { listId } = useParams();
-    console.log(listId);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const ids = searchParams.get("id") || 'a'
+    console.log(ids, 'ids')
+    // setSearchParams({
+    //     id: 12
+    // })
+    // console.log(ids, 'ids1')
+    // console.log(searchParams, '1')
+    // setSearchParams({ tab: "1" });
+    // console.log(searchParams, '2')
     return (
         <h1>详情</h1>
     )

21.react/高阶/project4/src/pages/Home.jsx

@@ -1,6 +1,35 @@
+import { useNavigate } from "react-router-dom";
+
 function Home() {
+    const navigate = useNavigate();
+    const handleList = () => {
+        // 对象
+        // navigate({
+        //     pathname: '/list',
+        //     search: '?id=10'
+        // })
+        // 字符串
+        // navigate("/my")
+        // 前进后退
+        // navigate(-2)
+        /**
+         * 为什么要用state 
+         * 具有持久性
+         * 1.state 保证数据不丢失
+         * 2.state保留到history
+         */
+        navigate('/my', {
+            state: {
+                msg: "这是一个特殊的"
+            }
+        })
+        // navigate('/login', { replace: true })
+    }
     return (
-        <h1>主页</h1>
+        <div>
+            <h1>主页</h1>
+            <button onClick={handleList}>去列表</button>
+        </div>
     )
 }
 

21.react/高阶/project4/src/pages/List.jsx

@@ -1,6 +1,10 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams, useSearchParams } from "react-router-dom";
 function List() {
+
+    const [searchParams, setSearchParams] = useSearchParams();
+    console.log(searchParams.get('id'), '跳转')
+    // console.log(searchParams.get('id'), '跳转1')
     const [list, setList] = useState([
         {
             id: 1,

21.react/高阶/project4/src/pages/My.jsx

@@ -1,4 +1,8 @@
+import { useLocation } from "react-router-dom";
+
 function My() {
+    const location = useLocation();
+    console.log(location, 'location')
     return (
         <h1>我的</h1>
     )

21.react/高阶/project4/src/router/index.jsx

@@ -5,6 +5,7 @@ import List from "../pages/List";
 import Error from '../pages/Error';
 import Layout from "../Layout";
 import Detail from "../pages/Detail";
+import Login from "../pages/Login";
 const routes = [
     {
         path: '/',
@@ -35,6 +36,10 @@ const routes = [
         // 兜底路由
         path: '*',
         element: <Error />
+    },
+    {
+        path: '/login',
+        element: <Login />
     }
 ]