12. react-router 基本使用

src/App.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, Suspense} from "react";
 // import logo from './logo.svg';
 import './App.css';
 
@@ -6,6 +6,11 @@ import InputComponent from "./components/InputComponent";
 import SonComponent from "./components/SonComponent";
 import SonComponent2 from "./components/SonComponent2";
 import {Link, NavLink, Route, Routes} from "react-router-dom";
+import SonPage from "./pages/SonPage";
+import Page3 from "./pages/Page3";
+
+// 异步组件, 懒加载
+const LazyPage = React.lazy(()=> import("./pages/SonPageLazy"))
 
 function App() {
     // vue3 组合式 API
@@ -177,6 +182,8 @@ function App() {
                 <NavLink to={"/"}> 首页 </NavLink>
                 <NavLink to={"router-page1"}> 页面1 </NavLink>
                 <NavLink to={"router-page2"}> 页面2 </NavLink>
+                <NavLink to={"router-page3/son-page"}> 页面3-子页面 </NavLink>
+                <NavLink to={"router-page3/son-page2?page=2"}> 页面3-子页面2 </NavLink>
             </div>
 
             <div>
@@ -186,14 +193,24 @@ function App() {
                 <Link to={"router-page2"}> 页面2 </Link>
             </div>
 
-            {/* react router v5 和 v6 有较大区别*/}
-            {/* v5 中为 Switch*/}
-            <Routes>
-                {/* v6 为 element 或 Component */}
-                <Route path="/router-page1" element={<div>Router Page 1</div>}></Route>
-                {/* v5 只有 component */}
-                <Route path="/router-page2" Component={() => <div>Router Page 2</div>}></Route>
-            </Routes>
+            {/*过渡效果*/}
+            <Suspense fallback={<div>...加载中...</div>}>
+                {/* react router v5 和 v6 有较大区别*/}
+                {/* v5 中为 Switch*/}
+                <Routes>
+                    {/* v6 为 element 或 Component */}
+                    <Route path="/router-page1" element={<div>Router Page 1</div>}></Route>
+                    {/* v5 只有 component */}
+                    <Route path="/router-page2" Component={() => <div>Router Page 2</div>}></Route>
+
+                    <Route path="/router-page3" element={<Page3/>}>
+                        <Route path={"son-page"} element={<SonPage/>}></Route>
+
+                        <Route path={"son-page2"} Component={LazyPage}></Route>
+                    </Route>
+                </Routes>
+            </Suspense>
+
             {/*class 类名必须为 className, 内容只能是字符串*/}
             <header className="App-header">
                 {/*<img src={logo} className="App-logo" alt="logo" />*/}
@@ -229,7 +246,7 @@ function App() {
                     <button onClick={clickHandler2}>按钮2</button>
                 </div>
                 <div>
-                    <button onClick={clickHandler3.bind(this, "按钮3")}>按钮3</button>
+                    <button onClick={clickHandler3.bind(this, "按钮3")}>按钮3(bind)</button>
                     <button onClick={(e) => clickHandler3("按钮3", e)}>按钮3</button>
                 </div>
 

src/pages/Page3.js

@@ -0,0 +1,10 @@
+import {Outlet} from "react-router-dom";
+
+export default function Page3(){
+    return <div>
+        Router Page3
+
+        {/*指定子页面显示位置*/}
+        <Outlet></Outlet>
+    </div>
+}

src/pages/SonPage.js

@@ -0,0 +1,44 @@
+import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
+import {useCallback} from "react";
+
+export default function SonPage(){
+    // 适用于 /path/:id 形式
+    let params = useParams()
+
+    // 适用于 /path?page=xxx 形式
+    let [query] = useSearchParams()
+    console.log(query, query.get("page"))
+
+    let location = useLocation()
+
+    const print = useCallback((obj)=>{
+        return JSON.stringify(obj)
+    },[])
+
+    const nav = useNavigate()
+
+    return <div>
+        Son Page
+
+        <div>
+            params => {print(params)}
+        </div>
+
+        <div>
+            query.get("page") => {print(query.get("page"))}
+        </div>
+
+        <div>
+            location => {print(location)}
+        </div>
+
+        <div>
+            <button onClick={() => nav("/")}> 跳转首页</button>
+            <button onClick={() => nav(location.pathname, {
+                state: {
+                    msg: "hello"
+                }
+            })}> 添加 state 跳转 </button>
+        </div>
+    </div>
+}

src/pages/SonPageLazy.js

@@ -0,0 +1,44 @@
+import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
+import {useCallback} from "react";
+
+export default function SonPage(){
+    // 适用于 /path/:id 形式
+    let params = useParams()
+
+    // 适用于 /path?page=xxx 形式
+    let [query] = useSearchParams()
+    console.log(query, query.get("page"))
+
+    let location = useLocation()
+
+    const print = useCallback((obj)=>{
+        return JSON.stringify(obj)
+    },[])
+
+    const nav = useNavigate()
+
+    return <div>
+        Son Page
+
+        <div>
+            params => {print(params)}
+        </div>
+
+        <div>
+            query.get("page") => {print(query.get("page"))}
+        </div>
+
+        <div>
+            location => {print(location)}
+        </div>
+
+        <div>
+            <button onClick={() => nav("/")}> 跳转首页</button>
+            <button onClick={() => nav(location.pathname, {
+                state: {
+                    msg: "hello"
+                }
+            })}> 添加 state 跳转 </button>
+        </div>
+    </div>
+}