reacr-router

react/react高阶/React路由.md

@@ -1,4 +1,5 @@
 ## React 路由
+### 1.基本路由
 1.安装路由包：npm install react-router-dom
   在package.json中查看是否安装成功
 2.创建页面开始配置路由
@@ -17,4 +18,5 @@ const router = createBrowserRouter([
 export default router
 5.在index.js页面中注入路由
 通过:import {RouterProvider} from 'react-router-dom';
-在根节点中抛出路由：抛出格式：<RouterProvider router={router} />
+在根节点中抛出路由：抛出格式：<RouterProvider router={router} />
+### 2.嵌套路由

react/react高阶/project1/src/components/Header.css

@@ -0,0 +1,16 @@
+* {
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    list-style: none;
+}
+.header {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: black;
+}
+.header li a{
+    color: #087EA4;
+}

react/react高阶/project1/src/components/Header.jsx

@@ -0,0 +1,17 @@
+import {Link} from 'react-router-dom';
+import './Header.css';
+function Header() {
+    return (
+        <>
+            <ul className='header'>
+                <li>
+                    <Link to={{pathname:'/'}}>首页</Link>
+                </li>
+                <li>
+                    <Link to={{pathname:"/about"}}>相关页</Link>
+                </li>
+            </ul>
+        </>
+    )
+}
+export default Header;

react/react高阶/project1/src/layout/index.js

@@ -0,0 +1,12 @@
+import Header from "../components/Header";
+import { Outlet } from "react-router-dom";
+function Layout() {
+    return (
+        <>
+            <Header/>
+            <Outlet/>
+        </>
+    )
+}
+
+export default Layout;

react/react高阶/project1/src/router/index.js

@@ -3,7 +3,7 @@ import {createBrowserRouter} from 'react-router-dom';
 // 1.引入页面
 import Home from '../pages/Home';
 import About from '../pages/About';
-
+import Layout from '../layout/index'
 // const router = createBrowserRouter([
 //     {
 //        /**
@@ -20,18 +20,28 @@ import About from '../pages/About';
 // ]);
 
 const routes = [
-        {
-           /**
-            * path: 指代页面要显示的路由路径
-            * element: 指代要显示的页面
-            */
-           path: '/',
-           element: <Home/>
-        },
-        {
-            path: '/about',
-            element: <About/>
-        }
+    // 路由嵌套
+
+    {
+        path:'/',
+        element: <Layout/>,
+        children:[
+            // 子集路由没有/
+            {
+                // 子集默认页  可以使用index：true
+                index: true,
+                // path: '',
+                element: <Home/>
+             },
+             {
+                 path: 'about',
+                 element: <About/>
+             }
+        ]
+    }
+
+
+
 ]
 const router = createBrowserRouter(routes)
 export default router;