react

16.react/react高阶/project1/src/components/Clock.jsx

@@ -12,6 +12,7 @@ class Clock extends Component {
      * 点击按钮出发事件
      * 点击开始时间
      * 再点击停止时间
+     * 
      * @returns 
      */
     render() {

16.react/react高阶/project1/src/components/LearnUseEffect.jsx

@@ -22,7 +22,6 @@ function Item({name,age}) {
     // 4.监听state或props中的值的改变 并且 首次渲染时 执行 
     useEffect(()=>{
         console.log("改变啊哈哈")
-        
     },[name1,age1])
     return (
        <>

16.react/react高阶/project2/package-lock.json

@@ -12,8 +12,9 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "@testing-library/user-event": "^13.5.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.29.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3103,6 +3104,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.22.0.tgz",
+      "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
+      "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",
@@ -13767,10 +13777,13 @@
       }
     },
     "node_modules/react": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmmirror.com/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13904,15 +13917,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-19.0.0.tgz",
-      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.25.0"
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^19.0.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-error-overlay": {
@@ -13936,6 +13950,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.29.0.tgz",
+      "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.29.0.tgz",
+      "integrity": "sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0",
+        "react-router": "6.29.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",
@@ -14612,10 +14658,13 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.25.0.tgz",
-      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
-      "license": "MIT"
+      "version": "0.23.2",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
     },
     "node_modules/schema-utils": {
       "version": "4.3.0",

16.react/react高阶/project2/package.json

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

16.react/react高阶/project2/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

16.react/react高阶/project2/src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

16.react/react高阶/project2/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

16.react/react高阶/project2/src/components/Common.css

@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+}
+.header {
+  width: 100%;
+  height: 75px;
+  line-height: 75px;
+  color: #fff;
+  background: #333;
+  p {
+    font-size: 26px;
+    padding-left: 20px;
+  }
+}

16.react/react高阶/project2/src/components/Common.jsx

@@ -0,0 +1,11 @@
+import "./Common.css";
+function Common() {
+  return (
+    <>
+      <div className="header">
+        <p>React路由案例</p>
+      </div>
+    </>
+  );
+}
+export default Common;

16.react/react高阶/project2/src/components/Nav.css

@@ -0,0 +1,23 @@
+ul {
+    height: calc(100vh - 75px);
+    display: flex;
+    flex-direction: column;
+    li {
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      a {
+        color: #000;
+      }
+    }
+  }
+  .pending {
+    color: green !important;
+  }
+  .active {
+    color: red !important;
+  }
+  .normal {
+    color: #000 !important;
+  }

16.react/react高阶/project2/src/components/Nav.jsx

@@ -0,0 +1,26 @@
+import "./Nav.css";
+import { NavLink } from "react-router-dom";
+function Nav() {
+  const handleChoose = ({isActive, isPending}) => isPending ? "pending" : isActive ? "active" : "normal";
+  
+  return (
+    <ul>
+      <li>
+        <NavLink className={handleChoose} to="/home">
+          首页
+        </NavLink>
+      </li>
+      <li>
+        <NavLink className={handleChoose} to={{ pathname: "/list" }}>
+          列表
+        </NavLink>
+      </li>
+      <li>
+        <NavLink className={handleChoose} to="/my">
+          我的
+        </NavLink>
+      </li>
+    </ul>
+  );
+}
+export default Nav;

16.react/react高阶/project2/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 router from './router';
+import {RouterProvider} from 'react-router-dom';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 

16.react/react高阶/project2/src/layout/index.css

@@ -0,0 +1,11 @@
+.main {
+  display: flex;
+  .left {
+    width: 200px;
+    border-right: 2px solid #ccc;
+  }
+  .right {
+    flex: 1;
+    padding: 15px;
+  }
+}

16.react/react高阶/project2/src/layout/index.jsx

@@ -0,0 +1,21 @@
+import Common from "../components/Common.jsx";
+import Nav from "../components/Nav.jsx";
+import "./index.css";
+import { Outlet } from "react-router-dom";
+
+function Layout() {
+  return (
+    <>
+      <Common />
+      <div className="main">
+        <div className="left">
+          <Nav />
+        </div>
+        <div className="right">
+          <Outlet />
+        </div>
+      </div>
+    </>
+  );
+}
+export default Layout;

16.react/react高阶/project2/src/pages/Detail/index.jsx

@@ -0,0 +1,18 @@
+import { useLocation,useSearchParams,useParams,useNavigate } from 'react-router-dom';
+function Detail(){
+    // const location =useLocation();
+    let [searchParams] = useSearchParams();
+    const params = useParams()
+    const go = useNavigate()
+    console.log(params,'params1')
+    console.log(searchParams,'searchParams')
+    return (
+        <>
+            <h1>详情</h1>
+            <p onClick={()=>{
+                go(-2)
+            }}>去首页</p>
+        </>
+    )
+}
+export default Detail;

16.react/react高阶/project2/src/pages/Error/index.jsx

@@ -0,0 +1,8 @@
+function Error() {
+  return (
+    <>
+      <h2>当前页面不存在</h2>
+    </>
+  );
+}
+export default Error;

16.react/react高阶/project2/src/pages/Home/index.jsx

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

16.react/react高阶/project2/src/pages/Init/index.jsx

@@ -0,0 +1,8 @@
+function Init() {
+  return (
+    <>
+      <h2>欢迎进入React路由</h2>
+    </>
+  );
+}
+export default Init;

16.react/react高阶/project2/src/pages/List/index.css

@@ -0,0 +1,9 @@
+table {
+    width: 300px;
+    height: 300px;
+    margin: 100px auto;
+}
+a {
+  text-decoration: none;
+  color: #333;
+}

16.react/react高阶/project2/src/pages/List/index.jsx

@@ -0,0 +1,65 @@
+import "./index.css";
+import { Link } from "react-router-dom";
+function List() {
+  const newList = [
+    {
+      id: 11,
+      name: "孙悟空",
+      desc: "我家住在花果山",
+    },
+    {
+      id: 22,
+      name: "胡图图",
+      desc: "我家住在翻斗花园",
+    },
+    {
+      id: 33,
+      name: "喜羊羊",
+      desc: "我家住在青青草原",
+    },
+  ];
+  return (
+    <>
+      <table border={2}>
+        <thead>
+          <tr>
+            <td>姓名</td>
+            <td>描述</td>
+            <td>操作</td>
+          </tr>
+        </thead>
+        <tbody>
+          {newList.map((item, index) => (
+            <tr key={index}>
+              <td>{item.name}</td>
+              <td>{item.desc}</td>
+              {/* 1.路由传参 动态跳转 路由绑定字段 */}
+              <td><Link to={{pathname:`/detail/${item.id}`}}>去详情</Link></td>
+              {/* 2.查询参数 */}
+              {/* <td><Link to={`/detail?productId=${item.id}`}>去详情</Link></td> */}
+              {/* <td><Link to={{
+                          pathname:'/detail',
+                          search:`?goodsId=${item.id}&&main=${item.desc}`
+                        }}>去详情</Link></td> */}
+              {/* 3.history 路由传参 state 传参 */}
+              {/* <td>
+                <Link
+                  to={{
+                    pathname: "/detail",
+                  }}
+                  state={{
+                    shopId:item.id,
+                    main:item.desc
+                  }}
+                >
+                  去详情
+                </Link>
+              </td> */}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+export default List;

16.react/react高阶/project2/src/pages/My/index.jsx

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

16.react/react高阶/project2/src/router/index.js

@@ -0,0 +1,75 @@
+import { createBrowserRouter } from "react-router-dom";
+import {lazy,Suspense} from 'react';
+// 路由分为两种：hash history
+// 引入页面
+import Home from "../pages/Home";
+import List from "../pages/List";
+import My from "../pages/My";
+import Detail from "../pages/Detail";
+// import Init from "../pages/Init";
+import Error from "../pages/Error";
+import Layout from "../layout";
+
+const Init = lazy(()=>import('../pages/Init'))
+
+// 创建路由
+const routes = [
+  /**
+   * path:指代页面要显示的路径
+   * element：指代要显示的页面
+   */
+  /**
+     * {
+        path:'/',
+        element: <Home/>
+    },
+    {
+        path:'/list',
+        element: <List/>
+    },
+    {
+        path:'/my',
+        element: <My/>
+    }
+     */
+    {
+        path:'/',
+        element: <Layout></Layout>,
+        children:[
+            {
+                index: true,
+                element: (
+                    <Suspense fallback='...'>
+                        <Init></Init>
+                    </Suspense>
+                )
+            },
+            {
+                // 子集默认页 可以设置index:true
+                // index: true,
+                path:'/home',
+                element: <Home/>
+            },
+            {
+                path:'list',
+                element: <List/>
+            },
+            {
+                path:'my',
+                element: <My/>
+            },
+            {
+                // path:'detail',
+                path:'detail/:ids',
+                element: <Detail/>
+            },
+            {
+                path:'*',
+                element: <Error/>
+            }
+        ]
+    }
+];
+
+const router = createBrowserRouter(routes);
+export default router;