react-router

react/react高阶/project3/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3540,6 +3541,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16212,6 +16222,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/react-scripts/-/react-scripts-5.0.1.tgz",

react/react高阶/project3/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

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

@@ -0,0 +1,25 @@
+* {
+    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: #fff;
+}
+.active {
+    color: red !important;
+}
+.pending {
+    color: #ff0 !important;
+}
+.normal {
+    color: #087EA4 !important;
+}

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

@@ -0,0 +1,20 @@
+import {Link,NavLink} from 'react-router-dom';
+import './Header.css';
+function Header() {
+    const handleActive = ({ isActive, isPending }) =>
+    isPending ? "pending" : isActive ? "active" : "normal"
+    return (
+        <>
+        {/* 声明式导航：Link NavLink */}
+            <ul className='header'>
+                <li>
+                    <NavLink className={handleActive} to={{pathname:'/'}}>首页</NavLink>
+                </li>
+                <li>
+                    <NavLink className={handleActive} to="/my">我的</NavLink>
+                </li>
+            </ul>
+        </>
+    )
+}
+export default Header;

react/react高阶/project3/src/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+import {RouterProvider} from 'react-router-dom';
+import router from './router';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 

react/react高阶/project3/src/layout copy/index.jsx

@@ -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高阶/project3/src/layout/index.jsx

@@ -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高阶/project3/src/pages/Home.jsx

@@ -0,0 +1,8 @@
+function Home() {
+    return (
+        <>
+            <h1>首页</h1>
+        </>
+    )
+}
+export default Home;

react/react高阶/project3/src/pages/Login.jsx

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

react/react高阶/project3/src/pages/My.jsx

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

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

@@ -0,0 +1,55 @@
+import { createBrowserRouter } from "react-router-dom";
+// import Home from '../pages/Home';
+// import My from '../pages/My';
+import Login from "../pages/Login";
+import Layout from "../layout/index.jsx";
+import { lazy, Suspense } from "react";
+// 1.引入需要懒加载的页面
+const Home = lazy(async () => {
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 3000);
+  })
+  return import("../pages/Home.jsx");
+});
+const My = lazy(() => import("../pages/My.jsx"));
+
+// 封装懒加载高阶组件 实现页面懒加载
+function lazyLoad(Component) {
+  return (
+    <Suspense fallback={<h3>Loading....</h3>}>
+      <Component />
+    </Suspense>
+  );
+}
+
+const routes = [
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        // path:"",
+        element: lazyLoad(Home),
+      },
+      {
+        path: "my",
+        element: (
+            <Suspense>
+                <My/>
+            </Suspense>
+        ),
+      },
+    ],
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;