no message

chenxuan1/src/App.js

@@ -1,25 +1,38 @@
-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>
-  );
+/*
+ * @Author: chenxuan
+ * @Date: 2022-05-22 21:48:34
+ * @LastEditTime: 2022-08-23 01:06:03
+ * @LastEditors: chenxuan
+ */
+import React,{Component} from 'react'
+import {NavLink,Route,Routes} from 'react-router-dom'
+import routes from './router';
+import Head from "./pages/head"
+import  './pages/style.scss'
+class App extends Component{
+  render(){
+    return(
+      <div className='mainContainer'>
+        <div className='nav'>
+              <NavLink to='/about' children="About"/>
+              <NavLink  to='/home' activeClassName='active'>Home</NavLink>
+              <NavLink to='/ref'>ref</NavLink>
+              <NavLink to='/props'>props</NavLink>
+              <NavLink to='/life'>生命周期函数</NavLink> 
+        </div>
+        <div className='content'>
+          <Head/>
+          <Routes>
+              {
+                routes.map((i)=>{
+                  return <Route path={i.path} element={i.component} key={i.path}></Route>
+                })
+              }
+            </Routes>
+         
+        </div>
+      </div>
+    )
+  }
 }
-
 export default App;

chenxuan1/src/index.js

@@ -3,11 +3,13 @@ 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(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

chenxuan1/src/pages/about.jsx

@@ -0,0 +1,13 @@
+import React,{Component} from "react";
+ class About extends Component
+ {
+     render()
+     {
+         return(
+             <div>
+                 <h1>This is About</h1>
+             </div>
+         )
+     }
+ }
+ export default About;

chenxuan1/src/pages/head.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+// import {withRouter} from "react-router-dom";
+class Head extends React.Component{
+    back=()=>{
+        // this.props.history.goBack()
+    }
+    forward=()=>{
+        // this.props.history.goForward()
+    }
+    go=()=>{
+        // this.props.history.go(-2)
+    }
+    render(){
+        return(
+            <div className="head">
+                <h1>this is Hader</h1>
+                <button onClick={this.back}>返回</button>
+                <button onClick={this.forward}>前进</button>
+                <button onClick={this.go}>退后2步</button>
+            </div>
+        )
+    }
+}
+export default Head

chenxuan1/src/pages/home.jsx

@@ -0,0 +1,11 @@
+import React,{Component} from 'react';
+class Home extends Component{
+    render(){
+        return(
+            <div>
+                <h1>This is Home</h1>
+            </div>
+        )
+    }
+}
+export default Home;

chenxuan1/src/pages/life.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+class Life extends React.Component {
+  componentDidMount() {
+    console.log('componentDidMount');
+  }
+  componentDidUpdate() {
+    console.log('componentDidUpdate');
+  }
+  componentWillUnmount() {
+    console.log('componentWillUnmount');
+  }
+  render() {
+    return (
+      <div>
+        <h1>生命周期函数</h1>
+      </div>
+    );
+  }
+}
+export default Life;

chenxuan1/src/pages/props.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+class Props extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>this is props</h1>
+      </div>
+    );
+  }
+}
+export default Props;

chenxuan1/src/pages/ref.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+class Ref extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+  }
+  componentDidMount() {
+    this.inputRef.current.focus();
+  }
+  render() {
+    return (
+      <div>
+        <input type="text" ref={this.inputRef} />
+      </div>
+    );
+  }
+}
+export default Ref;

chenxuan1/src/pages/style.css

@@ -0,0 +1,44 @@
+.mainContainer * {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mainContainer .nav {
+  box-sizing: border-box;
+  float: left;
+  width: 200px;
+  height: 100vh;
+  padding: 12px;
+  border-right: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.mainContainer .nav a {
+  text-decoration: none;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+}
+
+.mainContainer .nav .active {
+  color: red;
+  font-weight: bold;
+}
+
+.mainContainer .content {
+  margin-left: 210px;
+}
+
+.mainContainer .content .head {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.mainContainer .content .head button {
+  margin-right: 12px;
+}

chenxuan1/src/pages/style.min.css

@@ -0,0 +1 @@
+.mainContainer *{padding:0;margin:0;list-style:none}.mainContainer .nav{box-sizing:border-box;float:left;width:200px;height:100vh;padding:12px;border-right:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.mainContainer .nav a{text-decoration:none;display:inline-block;height:40px;line-height:40px}.mainContainer .nav .active{color:red;font-weight:bold}.mainContainer .content{margin-left:210px}.mainContainer .content .head{box-sizing:border-box;padding-bottom:12px;border-bottom:1px solid #eee}.mainContainer .content .head button{margin-right:12px}

chenxuan1/src/pages/style.scss

@@ -0,0 +1,41 @@
+.mainContainer{
+    *{
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+    .nav{
+        box-sizing: border-box;
+        float: left;
+        width: 200px;
+        height: 100vh;
+        padding: 12px;
+        border-right: 1px solid #eee;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        a{
+            text-decoration: none;
+            display: inline-block;
+            height: 40px;
+            line-height: 40px;
+        }
+        .active{
+            color: red;
+            font-weight: bold;
+        }
+
+    }
+    .content{
+        margin-left: 210px;
+        .head{
+            box-sizing: border-box;
+            padding-bottom: 12px;
+            border-bottom: 1px solid #eee;
+            button{
+                margin-right: 12px;
+            }
+        }
+    }
+}

chenxuan1/src/pages/this.jsx

@@ -0,0 +1,11 @@
+import React from 'react'; 
+class This extends React.Component {
+    render() {
+        return(
+            <div>
+                <h1>this 指向问题</h1>
+            </div>
+        )
+    }
+}
+export default This;

chenxuan1/src/router/index.jsx

@@ -0,0 +1,35 @@
+import About from '../pages/about'
+import Home from '../pages/home'
+import Ref from "../pages/ref"
+import This from "../pages/this"
+import Props from "../pages/props"
+import Life from "../pages/life"
+const routes = [
+    {
+      path: "/home",
+      component: Home
+    },
+    {
+      path: "/about",
+      component: About
+    },
+    {
+        path: "/life",
+        component:Life
+    },
+    {
+        path: "/ref",
+        component: Ref
+    },
+    {
+        path: "/this",
+        component: This
+    },
+    {
+        path: "/props",
+        component: Props
+    },
+  ];
+
+  export default routes;
+