feat: 重构

senwii · Dec 31, 2019 · 5cfcfa8 · 5cfcfa8
1 parent 6ba8339
commit 5cfcfa8
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 311 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,7 @@
 # react-template-project
-> react模板项目
+> React Template Project Integrated Github Actions
 
 ![ci action](https://github.com/senwii/react-template-project/workflows/ci/badge.svg)
 
 
 技术栈：React Hooks + React Router DOM
-
-特性：支持SPA/MPA
-
-SPA页面结构参考`/src/pages/Index/`
-
-新增MPA页面：`/src/pages/`目录下新建一个文件夹即可，参考`/src/pages/Index/`
-
-访问页面：localhost:${port}${pathPrefix}${pageFolderName}
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "serve": "NODE_ENV=develop webpack-dev-server",
     "build:develop": "NODE_ENV=develop webpack",
-    "build": "NODE_ENV=product webpack"
+    "build": "NODE_ENV=production webpack"
   },
   "author": "senwii",
   "homepage": "https://senii.github.io/react-template-project",

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Single Page Apps for GitHub Pages</title>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // https://github.com/rafrex/spa-github-pages
+      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+      // ----------------------------------------------------------------------
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
+
+      // If you're creating a Project Pages site and NOT using a custom domain,
+      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
+      // This way the code will only replace the route part of the path, and not
+      // the real directory in which the app resides, for example:
+      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
+      // Otherwise, leave segmentCount as 0.
+      var segmentCount = 0;
+
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
+        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,37 @@
 	<title><%= title %></title>
 	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
 	<link rel="icon" href="https://senwii.github.io/react-template-project/assets/logo_64x64.png" type="img/x-ico" />
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
+	// Single Page Apps for GitHub Pages
+	// https://github.com/rafrex/spa-github-pages
+	// Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+	// ----------------------------------------------------------------------
+	// This script checks to see if a redirect is present in the query string
+	// and converts it back into the correct url and adds it to the
+	// browser's history using window.history.replaceState(...),
+	// which won't cause the browser to attempt to load the new url.
+	// When the single page app is loaded further down in this file,
+	// the correct url will be waiting in the browser's history for
+	// the single page app to route accordingly.
+	(function(l) {
+		if (l.search) {
+		var q = {};
+		l.search.slice(1).split('&').forEach(function(v) {
+			var a = v.split('=');
+			q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
+		});
+		if (q.p !== undefined) {
+			window.history.replaceState(null, null,
+			l.pathname.slice(0, -1) + (q.p || '') +
+			(q.q ? ('?' + q.q) : '') +
+			l.hash
+			);
+		}
+		}
+	}(window.location))
+	  </script>
+	  <!-- End Single Page Apps for GitHub Pages -->
 </head>
 <body>
 	<div id="app"></div>

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,32 @@
+import React from "react"
+import ReactDOM from 'react-dom'
+import {
+  BrowserRouter,
+  Switch,
+  Route,
+} from "react-router-dom"
+
+import routes from './router'
+
+function App() {
+  return (
+    <div className="root">
+      <BrowserRouter>
+        <Switch>
+              {
+                routes.map((route, index) => (
+                  <Route path={ route.path } key={ index } render={ props => (
+                    <route.component {...props} routes={route.routes} />
+                  )} />
+                ))
+              }
+            </Switch>
+      </BrowserRouter>
+    </div>
+  )
+}
+
+ReactDOM.render(
+	<App />,
+	document.getElementById('app'),
+)
diff --git a/src/pages/404/App.js b/src/pages/404/App.js
diff --git a/src/pages/404/assets/404_not_found.png b/src/pages/404/assets/404_not_found.png
diff --git a/src/pages/404/assets/logo.png b/src/pages/404/assets/logo.png
diff --git a/src/pages/404/style.less b/src/pages/404/style.less
diff --git a/src/pages/Index/App.js b/src/pages/Index/App.js
diff --git a/src/pages/Index/style.less b/src/pages/Index/style.less
diff --git a/src/pages/Index/views/About.js b/src/pages/Index/views/About.js
diff --git a/src/pages/Index/router.js → src/router.js b/src/pages/Index/router.js → src/router.js
@@ -3,19 +3,12 @@ import loadable from "@loadable/component"
 const routes = [
   {
     path: '/hello',
-    component: loadable(() => import(/* webpackChunkName: "hello" */ './views/Hello')),
+    component: loadable(() => import(/* webpackChunkName: "hello" */ './views/Hello.jsx')),
   },
   {
     path: '/about',
-    component: loadable(() => import(/* webpackChunkName: "about" */ './views/About')),
-  }
+    component: loadable(() => import(/* webpackChunkName: "about" */ './views/About.jsx')),
+  },
 ]
 
-// set current pageName as base
-const basename = `${process.env.PATH_PREFIX}Index`
-
-export {
-  basename,
-}
-
 export default routes
diff --git a/src/views/About.jsx b/src/views/About.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function About() {
+    return (
+        <div>This is the About page.</div>
+    )
+}
diff --git a/src/pages/Index/views/Hello.js → src/views/Hello.jsx b/src/pages/Index/views/Hello.js → src/views/Hello.jsx