router:0.0.1

config/webpack.common.config.js

@@ -6,7 +6,7 @@ const resolve = dir => {
 
 module.exports = {
   entry: {
-    index: "./src/index.js",
+    index: "./src/index.tsx",
     framework: ["react", "react-dom"]
   },
   output: {
@@ -15,7 +15,12 @@ module.exports = {
     chunkFilename: "static/js/[name].[chunkhash:8].js",
     filename: "static/js/[name].[hash:8].js"
   },
-
+  resolve: {
+    // 设置别名
+    alias: {
+      "@": resolve("src") // 这样配置后 @ 可以指向 src 目录
+    }
+  },
   module: {
     rules: [
       {

package.json

@@ -15,10 +15,12 @@
   "dependencies": {
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
     "antd": "^4.2.2",
     "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "ts-import-plugin": "^1.6.6"
   },
   "devDependencies": {

src/app.less

@@ -1,19 +1,19 @@
 @import "~antd/dist/antd.css";
 .App {
   height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: lightcoral;
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+  // background-color: lightcoral;
   h1 {
     font-size: 16px;
     color: #fff;
   }
-  .background {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: -124px;
-    z-index: -1;
-  }
+  // .background {
+  //   position: absolute;
+  //   width: 100%;
+  //   left: 0;
+  //   top: -124px;
+  //   z-index: -1;
+  // }
 }

src/app.tsx

@@ -1,19 +1,21 @@
 import React from "react";
 import { Button } from "antd";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import Home from "./pages/Home.tsx";
+
 import "./app.less";
 import background from "./images/background.jpg";
 
-function App() {
-	console.log(background);
-
-	return (
-		<div className="App">
-			<Button type="primary">Button</Button>
-			<h1>I am changed</h1>
-			<div>{background}</div>
-			<img className="background" src={background} alt="" />
-		</div>
-	);
+export default class App extends React.Component {
+	test() {
+		// body...
+		console.log(12);
+	}
+	render() {
+		return (
+			<div>
+				<Route path="/" component={Home} />
+			</div>
+		);
+	}
 }
-
-export default App;

src/components/layout/Header.tsx

@@ -0,0 +1,12 @@
+/*
+ * @Author: Johnhong9527
+ * @Date:   2020-05-12 17:06:30
+ * @Last Modified by:   Johnhong9527
+ * @Last Modified time: 2020-05-12 17:13:42
+ */
+import React from "react";
+export default class Header extends React.Component {
+	render() {
+		return <h1>10010101</h1>;
+	}
+}

src/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./app.tsx";
-
-ReactDOM.render(<App />, document.getElementById("root"));

src/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { HashRouter } from "react-router-dom";
+import App from "./App.tsx";
+
+ReactDOM.render(
+	<HashRouter>
+		<App />
+	</HashRouter>,
+	document.getElementById("root")
+);

src/pages/Dashboard.tsx

@@ -0,0 +1,29 @@
+/*
+ * @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

@@ -0,0 +1,14 @@
+/*
+ * @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/other.tsx

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