feat: 动态生成路由 (#7)

* feat: 引入 react-router & server 启动时生成路由 * fix: 修复按需加载时根目录路径错误的问题 * chore: 移除多余静态资源处理
orzyyyy · Jan 28, 2019 · 8954c76 · 8954c76
1 parent 16b3659
commit 8954c76
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 37 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="ninoninoni.js?23651c9bd998f1687b7d"></script></body></html>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="/dist/ninoninoni.js?c013f720fb82d65f1405"></script></body></html>
diff --git a/dist/mapping.json b/dist/mapping.json
@@ -1 +1 @@
-[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548578388069,"modifyTime":1548578388069},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548578388069,"modifyTime":1548578388069}]
+[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548647900804,"modifyTime":1548647900804},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548647900804,"modifyTime":1548647900804}]
diff --git a/dist/ninoninoni.js b/dist/ninoninoni.js
diff --git a/dist/vendor/1.js b/dist/vendor/1.js
diff --git a/dist/vendor/2.js b/dist/vendor/2.js
diff --git a/dist/vendor/3.js b/dist/vendor/3.js
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="dist/ninoninoni.js"></script></body></html>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="/dist/ninoninoni.js"></script></body></html>
diff --git a/package.json b/package.json
@@ -42,7 +42,8 @@
     "mini-xmind": "^1.0.3",
     "nino-cli": "^0.2.5",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.15.3"
+    "prettier": "^1.15.3",
+    "react-router-dom": "^4.3.1"
   },
   "pre-commit": [
     "lint-staged"

diff --git a/scripts/build.js b/scripts/build.js
@@ -6,6 +6,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 module.exports = {
   output: {
     path: path.join(cwd + '/dist'),
+    publicPath: '/dist/',
   },
   plugins: [
     new HtmlWebpackPlugin({

diff --git a/server/index.js b/server/index.js
@@ -37,7 +37,6 @@ app.use(bodyParser());
 app.use(router.routes());
 
 app.use(KoaStatic(process.cwd()));
-app.use(KoaStatic(path.join(process.cwd(), 'dist')));
 
 app.listen(9099);
 // eslint-disable-next-line

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Demo from './pages';
+import App from './router';
 
 const MOUNT_NODE = document.getElementById('root');
 
-ReactDOM.render(<Demo />, MOUNT_NODE);
-
-if (module.hot) {
-  module.hot.accept();
-}
+ReactDOM.render(<App />, MOUNT_NODE);
diff --git a/src/mapping.json b/src/mapping.json
@@ -1 +1 @@
-[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548578388069,"modifyTime":1548578388069},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548578388069,"modifyTime":1548578388069}]
+[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548647900804,"modifyTime":1548647900804},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548647900804,"modifyTime":1548647900804}]
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -27,13 +27,7 @@ export default class MainPage extends Component {
   };
 
   handleClick = ({ id }) => {
-    import('./mapping').then(target => {
-      this.setState({
-        Detail: target.default,
-        status: 'detail',
-        mappingId: id,
-      });
-    });
+    location.hash = `/${id}`;
   };
 
   generateMainPage = () => {

diff --git a/src/pages/mapping.js b/src/pages/mapping.js
@@ -15,7 +15,7 @@ export default class mapping extends Component {
 
   componentDidMount = () => {
     // eslint-disable-next-line
-    console.log(this.props.id);
+    console.log(location);
   };
 
   render = () => {

diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,33 @@
+import React, { Component, Suspense, lazy } from 'react';
+import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+const MainPage = lazy(() => import('./pages'));
+const MappingDetail = lazy(() => import('./pages/mapping'));
+import mapping from './mapping.json';
+
+export default class Entry extends Component {
+  render = () => {
+    return (
+      <Router>
+        <Suspense fallback={<div>加载中...</div>}>
+          <Switch>
+            <Route
+              path="/"
+              component={props => <MainPage {...props} />}
+              exact
+            />
+            {mapping.map(item => {
+              const { id } = item;
+              return (
+                <Route
+                  key={id}
+                  path={`/${id}`}
+                  component={props => <MappingDetail {...props} />}
+                />
+              );
+            })}
+          </Switch>
+        </Suspense>
+      </Router>
+    );
+  };
+}