react

19.React/高阶/project2/src/components/Nav.css

@@ -0,0 +1,21 @@
+.pending {
+    color: red;
+}
+.active {
+    color: greenyellow;
+}
+
+.link {
+    color: pink;
+}
+
+ul {
+    width: 400px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+ ul li {
+    font-size: 30px;
+ }

19.React/高阶/project2/src/components/Nav.jsx

@@ -0,0 +1,20 @@
+import './Nav.css';
+import { NavLink } from 'react-router-dom';
+function Nav() {
+    const handleStyles = ({isActive,isPending}) => isPending ? 'pengding' : isActive ? 'active' : 'link'; 
+    return <div>
+        <ul>
+            <li>
+                <NavLink className={handleStyles} to="/home">首页</NavLink>
+            </li>
+            <li>
+                <NavLink className={handleStyles} to="/list">列表</NavLink>
+            </li>
+            <li>
+                <NavLink className={handleStyles} to="/my">登录</NavLink>
+            </li>
+        </ul>
+    </div>
+}
+
+export default Nav;

19.React/高阶/project2/src/layout/index.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import Nav from "../components/Nav";
+function Layout() {
+    return <div>
+        {/* 导航 */}
+        <div className="nav">
+            <Nav></Nav>
+        </div>
+        {/* 内容 */}
+        <div className="main">
+            <Outlet></Outlet>
+        </div>
+    </div>
+}
+export default Layout;

19.React/高阶/project2/src/pages/Login.jsx

@@ -1,6 +0,0 @@
-function Login() {
-    return <div>
-        <h1>登录</h1>
-    </div>
-}
-export default Login;

19.React/高阶/project2/src/pages/My.jsx

@@ -0,0 +1,6 @@
+function My() {
+    return <div>
+        <h1>我的</h1>
+    </div>
+}
+export default My;

19.React/高阶/project2/src/router/index.js

@@ -1,20 +1,27 @@
 import { createBrowserRouter } from "react-router-dom";
 import Home from "../pages/Home";
 import List from "../pages/List";
-import Login from "../pages/Login";
+import My from "../pages/My";
+import Layout from "../layout";
 const routes = [
     {
         path: '/',
-        element:<Home></Home>
-    },
-    {
-        path: '/list',
-        element:<List></List>
-    },
-    {
-        path: '/login',
-        element:<Login></Login>
-    },
+        element: <Layout></Layout>,
+        children: [
+            {
+                path: 'home',
+                element: <Home></Home>
+            },
+            {
+                path: 'list',
+                element: <List></List>
+            },
+            {
+                path: 'my',
+                element: <My></My>
+            },
+        ]
+    }
 ];
 
 const router = createBrowserRouter(routes);