react

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

@@ -2,21 +2,21 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
-import {createBrowserRouter, RouterProvider} from 'react-router-dom';
-
+import { RouterProvider} from 'react-router-dom';
+import router from './router';
 // 定义路由表
-const routes = [
-  {
-    path:'/',
-    element: <div>首页</div>
-  },
-  {
-    path:'/my',
-    element:<h1>我的</h1>
-  }
-];
+// const routes = [
+//   {
+//     path:'/',
+//     element: <div>首页</div>
+//   },
+//   {
+//     path:'/my',
+//     element:<h1>我的</h1>
+//   }
+// ];
 // 创建路由表
-const router = createBrowserRouter(routes);
+// const router = createBrowserRouter(routes);
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

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

@@ -1,6 +1,22 @@
+import { Link, NavLink, Outlet } from "react-router-dom";
+import './home.css';
 function Home() {
+    const handleStyle = ({ isActive, isPending }) => isPending ? 'pending' : isActive ? 'active' : 'link';
     return <div>
-        首页
+        <h1 className="pending">首页</h1>
+        {/* <Link to="/list">列表</Link>
+        <Link to={{
+            pathname: '/login'
+        }}>登录</Link> */}
+       <div className="nav">
+         <NavLink className={handleStyle} to={{
+            pathname: '/list'
+        }}>列表</NavLink>
+        <NavLink className={handleStyle} to="/login">登录</NavLink>
+       </div>
+       {/* <div className="main">
+        <Outlet></Outlet>
+       </div> */}
     </div>
 }
 export default Home;

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

@@ -1,6 +1,6 @@
 function List() {
     return <div>
-        列表
+        <h1>列表</h1>
     </div>
 }
 export default List;

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

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

19.React/高阶/project2/src/pages/home.css

@@ -0,0 +1,10 @@
+.pending {
+    color: red;
+}
+.active {
+    color: greenyellow;
+}
+
+.link {
+    color: pink;
+}

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

@@ -0,0 +1,23 @@
+import { createBrowserRouter } from "react-router-dom";
+import Home from "../pages/Home";
+import List from "../pages/List";
+import Login from "../pages/Login";
+const routes = [
+    {
+        path: '/',
+        element:<Home></Home>
+    },
+    {
+        path: '/list',
+        element:<List></List>
+    },
+    {
+        path: '/login',
+        element:<Login></Login>
+    },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;
+