fix:study7

react/study7/project-deom/src/components/Footer.jsx

@@ -10,6 +10,8 @@ function Footer() {
         <div className="footer">
             <NavLink className={handleTap} to={{pathname:'/'}}>首页</NavLink>
             &nbsp;&nbsp;
+            <NavLink className={handleTap} to={'/shop'}>购物车</NavLink>
+            &nbsp;&nbsp;
             <NavLink className={handleTap} to={'/my'}>我的</NavLink>
         </div>
     )

react/study7/project-deom/src/hook/useMain.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useNavigate,useLocation } from "react-router-dom";
+// 自定义钩子
+// 1.必须是use开头
+// 2.自定义钩子可以使用react中的任意钩子
+const whiteList = ['/login','/','/my'];
+export function useMain() {
+    const go = useNavigate();
+    const location = useLocation()
+    useEffect(()=>{
+        let token = localStorage.getItem("token");
+        if(!token && !whiteList.includes(location.pathname)) {
+            if(window.confirm("当前用户未登录，是否进入登录界面")) {
+                go('/login')
+            }
+        }
+    },[location])
+}

react/study7/project-deom/src/pages/Login.jsx

@@ -0,0 +1,18 @@
+import {useNavigate} from 'react-router-dom'
+function Login() {
+    let go = useNavigate()
+    return (
+        <div>
+            <h1>这是登录页面</h1>
+            <input type="text" placeholder='请输入用户名' />
+            <br /><br />
+            <input type="password" placeholder='请输入密码' />
+            <br /><br />
+            <button onClick={()=>{
+                localStorage.setItem("token",'111111111');
+                go('/shop')
+            }}>登录</button>
+        </div>
+    )
+}
+export default Login;

react/study7/project-deom/src/pages/My.jsx

@@ -1,7 +1,17 @@
+import {useNavigate} from 'react-router-dom'
 function My() {
+    let go = useNavigate();
     return(
         <div>
             <h3>我的</h3>
+            <button
+                onClick={()=>{
+                    if(window.confirm("确定退出登录么")) {
+                        localStorage.clear();
+                        go('/')
+                    }
+                }}
+            >退出登录</button>
         </div>
     )
 }

react/study7/project-deom/src/pages/Shop.jsx

@@ -0,0 +1,11 @@
+import {useMain} from '../hook/useMain'
+
+function Shop() {
+    useMain()
+    return (
+        <div>
+            这是购物车页面
+        </div>
+    )
+}
+export default Shop;

react/study7/project-deom/src/router/index.js

@@ -3,9 +3,11 @@ import {lazy, Suspense} from 'react'
 import Home from '../pages/Home'
 // import My from '../pages/My'
 import Layout from '../layout'
+import Login from '../pages/Login'
+import Shop from '../pages/Shop'
 
 const My = lazy(()=>import('../pages/My'))
-
+// const Shop = lazy(()=>import('../pages/Shop'))
 const router = createBrowserRouter([
     {
         path:'/',
@@ -23,7 +25,15 @@ const router = createBrowserRouter([
                         <My/>
                     </Suspense>
                 )
-            }  
+            },
+            {
+                path:'/shop',
+                element:<Shop/>
+            }, 
+            {   
+                path:'/login',
+                element:<Login/>
+            },
         ]
     }