完成

mock/arr.json

@@ -0,0 +1,16 @@
+{
+  "arr": [
+    {
+      "id": 1,
+      "name": "nelson1"
+    },
+    {
+      "id": 2,
+      "name": "nelson2"
+    },
+    {
+      "id": 3,
+      "name": "nelson3"
+    }
+  ]
+}

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.20.0",
+    "pubsub-js": "^1.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

src/App.js

@@ -1,26 +1,13 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-
+import {NavLink} from 'react-router-dom'
+import MRoute from './route'
 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><NavLink to="/home">home</NavLink><NavLink to="/test">test</NavLink></div>
+        <MRoute></MRoute>
     </div>
   );
 }
-
 export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/Home.js

@@ -0,0 +1,37 @@
+import React, {Component, Fragment} from 'react';
+import {NavLink, Route} from 'react-router-dom'
+import New from './New'
+import Pub from './Pub'
+import Home1 from "./Home/Home1";
+import Home2 from "./Home/Home2";
+
+class Home extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            val: 'default val'
+        }
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <p>hello react cli {parseInt(Math.random() * 10)}</p>
+                <img src={require('../asset/1.jpg')}/>
+                <img src='cms站点领域.jpg'/>
+                <p>{this.state.val}</p>
+                <New text="nelson" call={(val) => {
+                    console.log(val)
+                    this.setState({val})
+                }}/>
+                <Pub/>
+                <NavLink to="/home/home1">home1</NavLink>
+                <NavLink to="/home/home2">home2</NavLink>
+                <Route path="/home/home1" component={Home1}></Route>
+                <Route path="/home/home2" component={Home2}></Route>
+            </Fragment>
+        );
+    }
+}
+
+export default Home;

src/components/Home/Home1.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+
+class Home1 extends Component {
+    render() {
+        return (
+            <div>
+                Home1
+            </div>
+        );
+    }
+}
+
+export default Home1;

src/components/Home/Home2.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+
+class Home2 extends Component {
+    render() {
+        return (
+            <div>
+                Home2
+            </div>
+        );
+    }
+}
+
+export default Home2;

src/components/New.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+import PubSub from 'pubsub-js'
+class New extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            num: 5,
+            ztext: 'yasaka'
+        }
+    }
+
+    fun = () => {
+        this.setState({num: this.state.num + 1})
+    }
+
+    render() {
+        return (
+            <div>
+                父组件传过来值为 ---- {this.props.text} -- {this.state.num}
+                <button onClick={this.fun}>click</button>
+                <button onClick={this.props.call.bind(this,this.state.ztext)}>up data</button>
+                <button onClick={()=>{
+                    PubSub.publish("vtt","call you!")
+                }}>call pub</button>
+            </div>
+        );
+    }
+}
+
+export default New;

src/components/Pub.js

@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+import PubSub from 'pubsub-js'
+import Axios from "axios";
+class Pub extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            dataList: []
+        }
+        PubSub.subscribe('vtt',(msg,data)=>{
+            console.log(data)
+        })
+    }
+    componentDidMount() {
+        Axios.get("http://localhost:4000/arr").then((res)=>{
+            this.setState({
+                dataList: res.data
+            })
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                {this.state.dataList.map((v,k)=>{
+                    return <p key={k}>{v.name}</p>
+                })}
+            </div>
+        );
+    }
+}
+export default Pub;

src/components/Test.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+
+class Test extends Component {
+    render() {
+        return (
+            <div>
+                Test
+            </div>
+        );
+    }
+}
+
+export default Test;

src/index.js

@@ -3,10 +3,10 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-
+import {BrowserRouter} from "react-router-dom"
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+      <BrowserRouter><App /></BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/route.js

@@ -0,0 +1,16 @@
+import {Route, Switch,Redirect} from 'react-router-dom'
+import Home from "./components/Home";
+import Test from "./components/Test";
+import React from "react";
+
+function MRoute() {
+    return (
+        <Switch>
+            <Route path="/home" component={Home}></Route>
+            <Route path="/test" component={Test}></Route>
+            <Redirect from="/" to="/home" exact/>
+        </Switch>
+    );
+}
+
+export default MRoute;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';