router:0.0.2

src/app.tsx

@@ -1,21 +1,41 @@
-import React from "react";
-import { Button } from "antd";
-import { BrowserRouter, Switch, Route } from "react-router-dom";
-import Home from "./pages/Home.tsx";
+import React from 'react';
 
-import "./app.less";
-import background from "./images/background.jpg";
+import { Switch, Route } from 'react-router-dom';
+import Home from './pages/Home/home.tsx';
+// import Other from './pages/other.tsx';
+
+import './app.less';
+import background from './images/background.jpg';
 
 export default class App extends React.Component {
-	test() {
-		// body...
-		console.log(12);
-	}
-	render() {
-		return (
-			<div>
-				<Route path="/" component={Home} />
-			</div>
-		);
-	}
+  tpl: Object[];
+  test(): any {
+    const requireComponents = require.context('./pages', true, /\.tsx$/);
+    let tpl: any[] = [];
+    requireComponents.keys().forEach((fileName) => {
+      const reqCom = requireComponents(fileName);
+      console.log(fileName);
+
+      const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
+      tpl.push({
+        reqComName,
+        component: reqCom.default || reqCom,
+      });
+    });
+    console.log(23, tpl[0].component);
+
+    return tpl;
+  }
+  render() {
+    return (
+      <div>
+        <Switch>
+          <Route exact path="/" component={Home} />
+          {this.test().map((key): any => (
+            <Route path={`/${key.reqComName}`} component={key.component} />
+          ))}
+        </Switch>
+      </div>
+    );
+  }
 }

src/index.tsx

@@ -1,11 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { HashRouter } from "react-router-dom";
-import App from "./App.tsx";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { HashRouter } from 'react-router-dom';
+import App from './App.tsx';
+// console.log(a());
+// function a() {
+//   return require.context('./pages', true, /\.tsx$/);
+// }
 
 ReactDOM.render(
-	<HashRouter>
-		<App />
-	</HashRouter>,
-	document.getElementById("root")
+  <HashRouter>
+    <App />
+  </HashRouter>,
+  document.getElementById('root')
 );

src/pages/Dashboard.tsx

@@ -1,29 +0,0 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 16:59:35
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 17:35:51
- */
-import React from "react";
-import { Route } from "react-router-dom";
-import Header from "@/components/layout/Header.tsx";
-import { Route, NavLink } from "react-router-dom";
-import Home from "./Home.tsx";
-import Other from "./Other.tsx";
-
-export default class Dashboard extends React.Component {
-	render() {
-		return (
-			<div>
-				<Header />
-				<NavLink to="/home">to home</NavLink>
-				<br />
-				<NavLink exact to="/other">
-					to other
-				</NavLink>
-				<Route path="/home" component={Home} />
-				<Route path="/other" component={Other} />
-			</div>
-		);
-	}
-}

src/pages/Home.tsx

@@ -1,14 +0,0 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 17:08:46
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 17:09:00
- */
-import React from "react";
-import { Route } from "react-router-dom";
-
-export default class Home extends React.Component {
-	render() {
-		return <div>Home</div>;
-	}
-}

src/pages/Home/home.tsx

@@ -0,0 +1,29 @@
+/*
+ * @Author: Johnhong9527
+ * @Date:   2020-05-12 17:08:46
+ * @Last Modified by:   Johnhong9527
+ * @Last Modified time: 2020-05-12 17:09:00
+ */
+import React from 'react';
+import { Button } from 'antd';
+import { Route } from 'react-router-dom';
+import './index.less';
+
+export default class Home extends React.Component {
+  goto() {
+    // console.log(this.props);
+
+    this.props.history.push('/other');
+    console.log(13);
+  }
+  render() {
+    return (
+      <div className="home-wrapper">
+        Home
+        <div>
+          <Button onClick={(e) => this.goto()}>goto</Button>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/Home/index.less

@@ -0,0 +1,3 @@
+.home-wrapper {
+  background-color: blanchedalmond;
+}

src/pages/other.tsx

@@ -4,11 +4,35 @@
  * @Last Modified by:   Johnhong9527
  * @Last Modified time: 2020-05-12 17:10:53
  */
-import React from "react";
-import { Route } from "react-router-dom";
-
+import React from 'react';
+import { Button } from 'antd';
+import { Route } from 'react-router-dom';
+/* 
+const requireComponents = require.context('./pages', true, /\.tsx$/);
+requireComponents.keys().map((fileName) => {
+  const reqCom = requireComponents(fileName);
+  const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
+  // 组件挂载
+  // Vue.component(reqComName, reqCom.default || reqCom);
+  console.log(reqCom, reqComName);
+}); */
 export default class Other extends React.Component {
-	render() {
-		return <div>Other</div>;
-	}
+  goto() {
+    // console.log(this.props);
+    // const getComponent = () => require.context('./pages', true, /\.tsx$/);
+    // this.props.history.push('/');
+    console.log(2131);
+  }
+  tpl() {
+    return <div>1231</div>;
+  }
+  render() {
+    return (
+      <div>
+        Other123123123123
+        <Button onClick={(e) => this.goto()}>goto</Button>
+        <div>{this.tpl()}</div>
+      </div>
+    );
+  }
 }