react

20.react/高阶/my-router/src/index.js

@@ -7,9 +7,7 @@ import {RouterProvider} from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <RouterProvider router={router}></RouterProvider>
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

20.react/高阶/my-router/src/layout/index.css

@@ -0,0 +1,28 @@
+.active {
+    color: red;
+}
+
+.default {
+    color: blueviolet;
+}
+.layout {
+    width: 500px;
+    height: 500px;
+    background: #ff0;
+    margin: 100px auto;
+    /* display: flex; */
+}
+nav {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 2px dashed #eee;
+    a {
+        font-size: 25px;
+        line-height: 25px;
+        color: #000;
+        text-decoration: none;
+    }
+}

20.react/高阶/my-router/src/layout/index.jsx

@@ -0,0 +1,23 @@
+import { Link,Outlet,NavLink } from "react-router-dom";
+import './index.css'
+function Layout() {
+    const handleLinkStyle = ({isActive,isPending})=>{
+        console.log(isActive,isPending,'ddsds')
+      return  isPending ? "pending" : isActive ? "active" : "default"
+    }
+    return (
+        <div className="layout">
+            <header>
+                <nav>
+                    <NavLink className={handleLinkStyle} to="/">首页</NavLink>
+                    <NavLink className={handleLinkStyle} to="/list">列表</NavLink>
+                    <NavLink className={handleLinkStyle} to="/my">我的</NavLink>
+                </nav>
+            </header>
+            <main>
+                <Outlet></Outlet>
+            </main>
+        </div>
+    )
+}
+export default Layout;

20.react/高阶/my-router/src/router/index.js

@@ -1,22 +1,31 @@
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, createHashRouter } from "react-router-dom";
 
 import Home from '../pages/Home';
 import List from '../pages/List';
 import My from '../pages/My';
+import Layout from "../layout";
 
 const router = createBrowserRouter([
     {
-        path:'/home',
-        element: <Home></Home>
-    },
-    {
-        path:'/list',
-        element: <List></List>
-    },
-    {
-        path:'/my',
-        element: <My></My>
-    },
+        path: '/',
+        element: <Layout />,
+        children: [
+
+            {
+                index: true,
+                // path: 'home',
+                element: <Home></Home>
+            },
+            {
+                path: 'list',
+                element: <List></List>
+            },
+            {
+                path: 'my',
+                element: <My></My>
+            },
+        ]
+    }
 ])
 
 export default router;