路由开发

src/pages/index.tsx

@@ -1,11 +1,14 @@
 import styles from "./index.less";
 import { Carousel } from "antd";
-import Caidan from "./menu/menu.js";
+import Menu from "./menu/menu.js";
+import IndexRouter from "./router/IndexRouter.js";
 
 export default function IndexPage() {
   return (
     <div>
-      <Caidan></Caidan>
+      <IndexRouter>
+        <Menu></Menu>
+      </IndexRouter>
     </div>
   );
 }

src/pages/menu/menu.js

@@ -2,78 +2,62 @@ import React, { Component } from "react";
 import "../index.css";
 import Showye from "../shouye/shouye.js";
 import Shijiankecheng from "../shijiankecheng/shijiankecheng";
+import { NavLink } from "react-router-dom";
 
-export default class Caidan extends Component {
-  state = {
-    list: [
-      {
-        id: 1,
-        text: "首页",
-      },
-      {
-        id: 2,
-        text: "实践课程",
-      },
-      {
-        id: 3,
-        text: "实践项目",
-      },
-      {
-        id: 4,
-        text: "教学课堂",
-      },
-      {
-        id: 5,
-        text: "在线竞赛",
-      },
-      {
-        id: 6,
-        text: "教学案例",
-      },
-      {
-        id: 7,
-        text: "交流问答",
-      },
-      {
-        id: 8,
-        text: "大学开源",
-      },
-      {
-        id: 9,
-        text: "工程认证",
-      },
-    ],
-    current: 0,
-  };
+export default class Menu extends Component {
   render() {
     return (
       <div>
         <div className="menu">
           <ul>
-            {this.state.list.map((item, index) => (
-              <li
-                key={item.id}
-                className={this.state.current === index ? "active" : ""}
-                onClick={() => this.handleClick(index)}
-              >
-                {item.text}
-              </li>
-            ))}
+            <li>
+              <NavLink to="/shouye" activeClassName="active">
+                首页
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/shijiankecheng" activeClassName="active">
+                实践课程
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/shijianxiangmu" activeClassName="active">
+                实践项目
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoxueketang" activeClassName="active">
+                教学课堂
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/zaixianjingsai" activeClassName="active">
+                在线竞赛
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoxueanli" activeClassName="active">
+                教学案例
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoliuwenda" activeClassName="active">
+                交流问答
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/daxuekaiyuan" activeClassName="active">
+                大学开源
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/gongchengrenzheng" activeClassName="active">
+                工程认证
+              </NavLink>
+            </li>
           </ul>
         </div>
-        {this.state.current === 0 && <Showye></Showye>}
-        {this.state.current === 1 && <Shijiankecheng></Shijiankecheng>}
       </div>
     );
   }
-  handlemove(index) {
-    console.log(index);
-  }
-  handleClick(index) {
-    console.log(index);
-
-    this.setState({
-      current: index,
-    });
-  }
 }

src/pages/router/IndexRouter.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
+import Shouye from "../shouye/shouye";
+import Shijiankecheng from "../shijiankecheng/shijiankecheng";
+
+export default class IndexRouter extends Component {
+  render() {
+    return (
+      <div>
+        <HashRouter>
+          {this.props.children}
+          <Switch>
+            <Route path="/shouye" component={Shouye}></Route>
+            <Route path="/shijiankecheng" component={Shijiankecheng}></Route>
+            <Redirect from="/" to="/shouye"></Redirect>
+          </Switch>
+        </HashRouter>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/Path1.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import Box4 from "./path1/box4";
+import Center6 from "../shouye/component/tg_dibu/center6";
+export default class Path1 extends Component {
+  render() {
+    return (
+      <div>
+        <div className="kc_main_box1">
+          <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1_subject_banner?t=1622205433"></img>
+          <div className="kc_main_box1_main">
+            <div>
+              <div className="kc_main_box1_main_box1">
+                <span>实践课程</span>
+                <span>实践型MOOC，让您的在线课程更专业</span>
+              </div>
+              <div className="kc_main_box1_main_box2">
+                <i></i>
+                新建课程
+              </div>
+              <div className="kc_main_box1_main_box2">
+                <i></i>
+                新手指引
+              </div>
+            </div>
+            <div>
+              <div className="kc_main_box1_main_box3">
+                <span>
+                  <input placeholder="搜索您感兴趣的实践课程"></input>
+                  <div className="kc_main_box1_main_box3_box">
+                    <button type="button">搜索</button>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Box4></Box4>
+        <Center6></Center6>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/Path2.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+import Path from "./path2/path";
+
+export default class Path2 extends Component {
+  render() {
+    console.log(this.props);
+    return (
+      <div>
+        <Path id={this.props.match.params.id}></Path>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path1/box4.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Box2 from "./box2";
+import { NavLink } from "react-router-dom";
 
 export default class Box4 extends Component {
   constructor() {
@@ -55,10 +56,8 @@ export default class Box4 extends Component {
         </div>
         <div className="kc_main_box4">
           {this.state.map.map((item, index) => (
-            <a
-              onClick={() => {
-                this.props.event(item.identifier);
-              }}
+            <NavLink
+              to={"/shijiankecheng/path2/" + item.identifier}
               key={item.id}
               className="kc_main_box4_box"
               style={{ color: "black", marginRight: index % 4 == 3 ? "0" : "" }}
@@ -80,7 +79,7 @@ export default class Box4 extends Component {
                   <div></div>
                 </div>
               </div>
-            </a>
+            </NavLink>
           ))}
         </div>
         {

src/pages/shijiankecheng/shijiankecheng.js

@@ -1,64 +1,20 @@
 import React, { Component } from "react";
-import "./shijiankecheng.css";
-import Center6 from "../shouye/component/tg_dibu/center6";
-
-import Box4 from "./box4";
-import Path from "./kecheng xiangqing/path";
+import { Route, Redirect, Switch } from "react-router-dom";
+import Path1 from "./Path1";
+import Path2 from "./Path2";
 
 export default class Shijiankecheng extends Component {
-  state = {
-    scan: true,
-    id: "",
-  };
-  handleevent(evt) {
-    this.setState({
-      scan: false,
-      id: evt,
-    });
-  }
   render() {
     return (
       <div className="kc_main">
-        {this.state.scan && (
-          <div className="kc_main_box1">
-            <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1_subject_banner?t=1622205433"></img>
-            <div className="kc_main_box1_main">
-              <div>
-                <div className="kc_main_box1_main_box1">
-                  <span>实践课程</span>
-                  <span>实践型MOOC，让您的在线课程更专业</span>
-                </div>
-                <div className="kc_main_box1_main_box2">
-                  <i></i>
-                  新建课程
-                </div>
-                <div className="kc_main_box1_main_box2">
-                  <i></i>
-                  新手指引
-                </div>
-              </div>
-              <div>
-                <div className="kc_main_box1_main_box3">
-                  <span>
-                    <input placeholder="搜索您感兴趣的实践课程"></input>
-                    <div className="kc_main_box1_main_box3_box">
-                      <button type="button">搜索</button>
-                    </div>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-        {this.state.scan && (
-          <Box4
-            event={(evt) => {
-              this.handleevent(evt);
-            }}
-          ></Box4>
-        )}
-        {!this.state.scan && <Path id={this.state.id}></Path>}
-        <Center6></Center6>
+        <Switch>
+          <Route path="/shijiankecheng/path1" component={Path1}></Route>
+          <Route path="/shijiankecheng/path2/:id" component={Path2} />
+          <Redirect
+            from="/shijiankecheng"
+            to="/shijiankecheng/path1"
+          ></Redirect>
+        </Switch>
       </div>
     );
   }