react

21.react/高阶/project4/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.19.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router-dom": "^7.18.2"
@@ -25,4 +26,4 @@
     "globals": "^17.7.0",
     "vite": "^8.2.0"
   }
-}
+}

21.react/高阶/project4/src/hooks/useAuth.jsx

@@ -0,0 +1,24 @@
+
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const WHITE_LIST = ['/', '/login'];
+
+export function useAuth() {
+    console.log("私下")
+    const location = useLocation();
+    const navigate = useNavigate()
+    useEffect(() => {
+        const token = localStorage.getItem("tokens");
+        console.log(token, 'token')
+        // 不在白名单
+        if (!WHITE_LIST.includes(location.pathname) && !token) {
+            console.log("尽量")
+            navigate("/login")
+        }
+        // if (!token) {
+        //     console.log("不存在")
+        //     navigate("/login")
+        // }
+    }, [location.pathname, navigate])
+}

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

@@ -1,5 +1,5 @@
 import { useParams, useSearchParams } from "react-router-dom";
-
+// import { useAuth } from "../hooks/useAuth";
 function Detail() {
     const { listId } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();

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

@@ -0,0 +1,12 @@
+import { useRouteError } from "react-router-dom";
+
+function ErrorPage() {
+    const error = useRouteError()
+    return (
+        <div>
+            <h2>{error.message}</h2>
+        </div>
+    )
+}
+
+export default ErrorPage;

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

@@ -4,10 +4,10 @@ function Home() {
     const navigate = useNavigate();
     const handleList = () => {
         // 对象
-        // navigate({
-        //     pathname: '/list',
-        //     search: '?id=10'
-        // })
+        navigate({
+            pathname: '/list',
+            search: '?id=10'
+        })
         // 字符串
         // navigate("/my")
         // 前进后退
@@ -18,11 +18,11 @@ function Home() {
          * 1.state 保证数据不丢失
          * 2.state保留到history
          */
-        navigate('/my', {
-            state: {
-                msg: "这是一个特殊的"
-            }
-        })
+        // navigate('/my', {
+        //     state: {
+        //         msg: "这是一个特殊的"
+        //     }
+        // })
         // navigate('/login', { replace: true })
     }
     return (

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

@@ -1,5 +1,6 @@
-import { useState } from "react";
-import { Link, useParams, useSearchParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { Link, useParams, useSearchParams, useLoaderData } from "react-router-dom";
+import axios from 'axios';
 function List() {
 
     const [searchParams, setSearchParams] = useSearchParams();
@@ -32,9 +33,37 @@ function List() {
             price: 2
         },
     ])
+    // useEffect(() => {
+    //     setSearchParams({
+    //         id: 12
+    //     })
+    // }, [])
+    // const [data, setData] = useState([]);
+    // const [loading, setLoading] = useState(true);
+    // const [error, setError] = useState(null)
+    // useEffect(() => {
+    //     setLoading(true)
+    //     axios.get('http://shop-api.edu.koobietech.com/prod/tagProdList').
+    //         then(res => {
+    //             console.log(res, '哈哈')
+    //             setData(res.data.data)
+    //         })
+    //         .catch(err => setError(err))
+    //         .finally(() => setLoading(false))
+    //     console.log(data, '书')
+    // }, [])
+
+    const data = useLoaderData();
+    console.log(data, '数据')
     return (
         <div>
             <h1>列表</h1>
+            <button onClick={() => setSearchParams({
+                id: 22
+            })}>修改参数</button>
+            {
+                data.res.data.data.map(item => <h2 key={item.id}>{item.title}</h2>)
+            }
             <ul>
                 {
                     list.map(item => <li key={item.id}>

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

@@ -6,10 +6,13 @@ import Error from '../pages/Error';
 import Layout from "../Layout";
 import Detail from "../pages/Detail";
 import Login from "../pages/Login";
+import axios from 'axios';
+import ErrorPage from '../pages/ErrorPage'
 const routes = [
     {
         path: '/',
         element: <Layout />,
+        errorElement: <ErrorPage></ErrorPage>,
         children: [
             {
                 // 索引路由
@@ -23,7 +26,13 @@ const routes = [
             },
             {
                 path: 'list',
-                element: <List />
+                element: <List />,
+                loader: async () => {
+                    const res = await axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList")
+                    console.log(res, 'res')
+                    return { res }
+                },
+                errorElement: <ErrorPage></ErrorPage>
             }
         ]
     },