fix:study7

react/study7/project-deom/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.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3261,6 +3262,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
+      "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",
@@ -14741,6 +14750,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "dependencies": {
+        "@remix-run/router": "1.13.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "dependencies": {
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
+      },
+      "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",
@@ -20075,6 +20114,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -28258,6 +28302,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "requires": {
+        "@remix-run/router": "1.13.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "requires": {
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

react/study7/project-deom/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.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

react/study7/project-deom/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);
-  }
-}

react/study7/project-deom/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;

react/study7/project-deom/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();
-});

react/study7/project-deom/src/components/Footer.css

@@ -0,0 +1,19 @@
+*{
+    text-decoration: none;
+    color: #000;
+}
+.footer {
+    width: 100%;
+    height: 80px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #eee;
+    display: flex;
+    flex: 1;
+    justify-content: space-around;
+    align-items: center;
+}
+.active {
+    color: red;
+}

react/study7/project-deom/src/components/Footer.jsx

@@ -0,0 +1,17 @@
+import {NavLink} from 'react-router-dom'
+import './Footer.css'
+
+const handleTap = ({ isActive }) => {
+    return isActive ? "active" : '';
+  }
+
+function Footer() {
+    return(
+        <div className="footer">
+            <NavLink className={handleTap} to={{pathname:'/'}}>首页</NavLink>
+            &nbsp;&nbsp;
+            <NavLink className={handleTap} to={'/my'}>我的</NavLink>
+        </div>
+    )
+}
+export default Footer;

react/study7/project-deom/src/components/Header.css

@@ -0,0 +1,9 @@
+.header {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    flex: 1;
+    justify-content: space-around;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+}

react/study7/project-deom/src/components/Header.jsx

@@ -0,0 +1,11 @@
+import './Header.css'
+function Header() {
+    return(
+        <div className="header">
+            <span>&lt;</span>
+            <span>大希地</span>
+            <span>...</span>
+        </div>
+    )
+}
+export default Header;

react/study7/project-deom/src/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 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}>
+    </RouterProvider>
   </React.StrictMode>
 );
 

react/study7/project-deom/src/layout/index.jsx

@@ -0,0 +1,20 @@
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import {Outlet} from 'react-router-dom'
+function Layout() {
+    return(
+        <div>
+            <div className="header">
+                <Header/>
+            </div>
+            <div className="main">
+                <Outlet/>
+            </div>
+            <div className="footer">
+                <Footer/>
+            </div>
+        </div>
+    )
+}
+
+export default Layout;

react/study7/project-deom/src/pages/Home.jsx

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

react/study7/project-deom/src/pages/My.jsx

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

react/study7/project-deom/src/router/index.js

@@ -0,0 +1,32 @@
+import {createBrowserRouter} from 'react-router-dom'
+import {lazy, Suspense} from 'react'
+import Home from '../pages/Home'
+// import My from '../pages/My'
+import Layout from '../layout'
+
+const My = lazy(()=>import('../pages/My'))
+
+const router = createBrowserRouter([
+    {
+        path:'/',
+        element:<Layout/>,
+        children:[
+            {   
+                // path:'/'
+                index:true,
+                element:<Home/>
+            },
+            {
+                path:'/my',
+                element:(
+                    <Suspense fallback={<h1>紧急加载中....</h1>}>
+                        <My/>
+                    </Suspense>
+                )
+            }  
+        ]
+    }
+
+])
+
+export default router;