React-Router:路由导航&页面传参-query string

15_React/day-5/code/learn-react-router/src/pages/about.jsx

@@ -0,0 +1,29 @@
+import { Link, useNavigate } from 'react-router-dom';
+import router from '../router';
+
+function About() {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <h3>关于页面</h3>
+      <Link to={'/'}>去主页</Link>
+      <button
+        onClick={() => {
+          navigate('/');
+        }}
+      >
+        go to home
+      </button>
+
+      <button
+        onClick={() => {
+          router.navigate('/');
+        }}
+      >
+        go to home(router)
+      </button>
+    </div>
+  );
+}
+
+export default About;

15_React/day-5/code/learn-react-router/src/pages/details.jsx

@@ -0,0 +1,15 @@
+import { useSearchParams } from 'react-router-dom';
+
+function Details() {
+  let [sp] = useSearchParams();
+
+  console.log(`output->sp`, sp);
+  return (
+    <div>
+      <h3>用户详情页</h3>
+      <p>您浏览的用户id为：{sp.get('id')}</p>
+    </div>
+  );
+}
+
+export default Details;

15_React/day-5/code/learn-react-router/src/pages/home.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Home() {
+  const navigate = useNavigate();
+  let [users] = useState([
+    { id: 1, name: 'daxia' },
+    { id: 2, name: 'guoguo' },
+  ]);
+  return (
+    <div>
+      <h3>主页</h3>
+      <Link to="/about">去关于页面</Link>
+      <button
+        onClick={() => {
+          navigate('/about');
+        }}
+      >
+        go to about
+      </button>
+      <div>
+        <ul>
+          {users.map((user) => (
+            <Link key={user.id} to={`/details?id=${user.id}`}>
+              <li>{user.name}</li>
+            </Link>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default Home;

15_React/day-5/code/learn-react-router/src/router/index.js

@@ -1,9 +1,18 @@
 import { createHashRouter } from 'react-router-dom';
+import Home from '../pages/home';
+import About from '../pages/about';
+import Details from '../pages/details';
 
 const router = createHashRouter([
-  { path: '/', element: <div>主页</div> },
-  { path: '/about', element: <div>关于</div> },
+  { path: '/', element: <Home /> },
+  { path: '/about', element: <About /> },
   { path: '/login', element: <div>登录</div> },
+  {
+    path: '/details',
+    element: <Details />,
+  },
 ]);
 
 export default router;
+
+console.log(`output->router`, router);