12. react-router

package-lock.json

@@ -14,6 +14,7 @@
         "proptypes": "^1.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3247,6 +3248,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "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",
@@ -14901,6 +14910,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.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",

package.json

@@ -9,6 +9,7 @@
     "proptypes": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -37,3 +37,7 @@
     transform: rotate(360deg);
   }
 }
+
+.active {
+  color: orange;
+}

src/App.js

@@ -5,6 +5,7 @@ import './App.css';
 import InputComponent from "./components/InputComponent";
 import SonComponent from "./components/SonComponent";
 import SonComponent2 from "./components/SonComponent2";
+import {Link, NavLink, Route, Routes} from "react-router-dom";
 
 function App() {
     // vue3 组合式 API
@@ -170,6 +171,29 @@ function App() {
 
     return (
         <div className="App">
+            <div>
+                <span>跳转至: </span>
+                {/*NavLink 会在当前路由匹配时 加一个 class 名为 active 的样式*/}
+                <NavLink to={"/"}> 首页 </NavLink>
+                <NavLink to={"router-page1"}> 页面1 </NavLink>
+                <NavLink to={"router-page2"}> 页面2 </NavLink>
+            </div>
+
+            <div>
+                <span>跳转至: </span>
+                <Link to={"/"}> 首页 </Link>
+                <Link to={"router-page1"}> 页面1 </Link>
+                <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>
             {/*class 类名必须为 className, 内容只能是字符串*/}
             <header className="App-header">
                 {/*<img src={logo} className="App-logo" alt="logo" />*/}
@@ -225,7 +249,9 @@ function App() {
                     父组件
                     <SonComponent a={1} b={2} msg={"App Msg"}
                                   slot2={<div>SonComponent 插槽 slot2 (具名插槽)</div>}
-                                  scopeslot={(scope)=>{return <div>{scope}</div>}}>
+                                  scopeslot={(scope) => {
+                                      return <div>{scope}</div>
+                                  }}>
                         <div>
                             SonComponent 插槽 slot1
                         </div>

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -12,7 +13,9 @@ root.render(
      *  重复执行2次生命周期函数, 检测额外的副作用 如 render
      */
     // <React.StrictMode>
-    <App/>
+    <BrowserRouter>
+        <App/>
+    </BrowserRouter>
     // </React.StrictMode>
 );