study5

react/study5/project/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.20.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3261,6 +3262,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14739,6 +14748,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
+      "dependencies": {
+        "@remix-run/router": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
+      "dependencies": {
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.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.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

react/study5/project/package.json

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

react/study5/project/src/App.js

@@ -1,22 +1,12 @@
 import logo from './logo.svg';
+import Test from './components/refDom'
 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>
+        <Test/>
       </header>
     </div>
   );

react/study5/project/src/components/refDom.jsx

@@ -0,0 +1,19 @@
+import { useRef } from "react";
+
+function Test() {
+    const newRef = useRef(null);
+    function handleClick(){
+        // focus 聚焦
+        // blur 失焦
+        console.log(newRef)
+        newRef.current.focus()
+    }
+    return(
+        <div>
+            <h3>这是一个函数组件</h3>
+            <input ref={newRef} type="text" />
+            <button onClick={handleClick}>聚焦</button>
+        </div>
+    )
+}
+export default Test;

react/study5/project/src/index.js

@@ -3,11 +3,14 @@ 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/study5/project/src/pages/About.jsx

@@ -0,0 +1,6 @@
+function About() {
+    return(
+        <div>有关页面</div>
+    )
+}
+export default About;

react/study5/project/src/pages/Home.jsx

@@ -0,0 +1,6 @@
+function Home() {
+    return(
+        <div>这是首页</div>
+    )
+}
+export default Home;

react/study5/project/src/router/index.js

@@ -0,0 +1,16 @@
+import {createBrowserRouter} from "react-router-dom";
+import Home from '../pages/Home';
+import About from '../pages/About';
+const route = [
+    // 页面路由
+    {
+        path:'/',
+        element:<Home/>
+    }, {
+        path:'/about',
+        element:<About/>
+    }
+]
+// 抛出路由
+const router = createBrowserRouter(route);
+export default router;

react/study5/路由.md

@@ -0,0 +1,2 @@
+## 路由安装命令 npm install react-router-dom@6
+## 路由网站 https://reactrouter.com/en/main/start/overview