Router and lazy import

darwinia-network · Mar 19, 2021 · 2fc46f5 · 2fc46f5
1 parent 5a05055
commit 2fc46f5
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -21,14 +21,16 @@
     "bootstrap": "^4.6.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.1.12",
+    "history": "^5.0.0",
     "i18next": "^19.9.2",
     "i18next-browser-languagedetector": "^6.0.1",
     "parallax-js": "^3.1.0",
     "react": "^17.0.1",
     "react-animate-on-scroll": "^2.1.5",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
-    "react-i18next": "^11.8.10"
+    "react-i18next": "^11.8.10",
+    "react-router-dom": "^5.2.0"
   },
   "browserslist": {
     "production": [

diff --git a/src/pages/404/index.js b/src/pages/404/index.js
@@ -0,0 +1,9 @@
+const NotFound = () => {
+    return (
+        <div style={{ margin: '20px auto' }}>
+            <div>Page Not found</div>
+        </div>
+    )
+};
+
+export default NotFound;
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -1,8 +1,9 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, Suspense, lazy } from 'react';
 import {
     Button,
     Container
 } from 'react-bootstrap';
+import { Spin } from 'antd';
 import Parallax from "parallax-js";
 import { useTranslation } from 'react-i18next';
 
@@ -343,4 +344,12 @@ const Home = () => {
     )
 };
 
+// const AsyncHome = () => {
+//     return (
+//         <Suspense fallback={<Spin size='large' style={{ marginTop: '40%' }} /> }>
+//             {lazy(() => )}
+//         </Suspense>
+//     )
+// }
+
 export default Home;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,6 +6,12 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
+// Routers
+import { Suspense, lazy } from 'react';
+import { Spin } from 'antd';
+import { createBrowserHistory } from "history";
+import { Router, Route, Switch } from "react-router-dom";
+
 const features = [
   {
     title: 'Easy to Use',
@@ -39,7 +45,7 @@ const features = [
   },
 ];
 
-function Feature({imageUrl, title, description}) {
+function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
     <div className={clsx('col col--4', styles.feature)}>
@@ -54,9 +60,9 @@ function Feature({imageUrl, title, description}) {
   );
 }
 
-export default function Home() {
+function Home() {
   const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
+  const { siteConfig = {} } = context;
 
   return (
     <Layout
@@ -94,3 +100,23 @@ export default function Home() {
     </Layout>
   );
 }
+
+const history = createBrowserHistory();
+const Routers = () => {
+  return (
+    <Router history={history}>
+      <Suspense fallback={<Spin size='large' style={{ marginTop: '40%' }} />}>
+        <Switch>
+          <Route
+            exact
+            component={lazy(() => import('./home'))}
+            path='/'
+          />
+          <Route component={lazy(() => import('./404'))} />
+        </Switch>
+      </Suspense>
+    </Router>
+  )
+}
+
+export default Routers;
diff --git a/yarn.lock b/yarn.lock
@@ -1095,7 +1095,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.6", "@babel/runtime@^7.13.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.6", "@babel/runtime@^7.13.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.13.10"
   resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha1-R9QqV7YJX0Ro2kQDiP262L6/DX0=
@@ -5372,6 +5372,13 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+history@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/history/download/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
+  integrity sha1-DKu7bEu/g1rduHT4JZ9tJRAe/Qg=
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -9278,7 +9285,7 @@ react-router-config@^5.1.1:
 
 react-router-dom@^5.2.0:
   version "5.2.0"
-  resolved "https://registry.npm.taobao.org/react-router-dom/download/react-router-dom-5.2.0.tgz?cache=0&sync_timestamp=1592608787345&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-router-dom%2Fdownload%2Freact-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  resolved "https://registry.npm.taobao.org/react-router-dom/download/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
   integrity sha1-nmWk0MReEyieZsexfH4XXQ6hVmI=
   dependencies:
     "@babel/runtime" "^7.1.2"