study5

react/study5/project/src/components/Header.css

@@ -0,0 +1,23 @@
+.header {
+    width: 100%;
+    height: 80px;
+}
+* {
+    text-decoration: none;
+    list-style: none;
+}
+.header ul{
+    width: 100%;
+    height: 80px;
+    display: flex;
+}
+.header ul li {
+    flex: 1;
+}
+.header ul li  a {
+    color:#000;
+}
+.header ul li a:hover {
+    color: #00f;
+    text-decoration: underline;
+}

react/study5/project/src/components/Header.jsx

@@ -0,0 +1,20 @@
+import "./Header.css";
+import { Link } from "react-router-dom";
+function Header() {
+  return (
+    <div className="header">
+      <ul>
+        <li>
+          <Link to="/">首页</Link>
+        </li>
+        <li>
+          <Link to={{ pathname: "/about" }}>列表</Link>
+        </li>
+        <li>
+          <Link to="/about">我的</Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+export default Header;

react/study5/project/src/layout/layout.css

@@ -0,0 +1,6 @@
+.layout {
+    width: 600px;
+    height: 700px;
+    border:1px solid #000;
+    margin: 0 auto;
+}

react/study5/project/src/layout/layout.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import Header from '../components/Header'
+import './layout.css'
+function Layout() {
+    return(
+        <div className='layout'>
+            <h3>整体布局</h3>
+            <Header/>
+            <div className="main">
+                <Outlet/>
+            </div>
+        </div>
+    )
+}
+export default Layout

react/study5/project/src/router/index.js

@@ -1,14 +1,23 @@
 import {createBrowserRouter} from "react-router-dom";
 import Home from '../pages/Home';
 import About from '../pages/About';
+import Layout from "../layout/layout";
 const route = [
     // 页面路由
     {
         path:'/',
-        element:<Home/>
-    }, {
-        path:'/about',
-        element:<About/>
+        element:<Layout/>,
+        children:[
+            {
+                // path:'',
+                index: true,
+                element:<Home/>
+            },
+            {
+                path:'about',
+                element:<About/>
+            }
+        ]
     }
 ]
 // 抛出路由