From ffd5c32f23e8d7be4c64cc471c91da11ae4676db Mon Sep 17 00:00:00 2001
From: syy11cn <syy11cn@outlook.com>
Date: Fri, 29 Oct 2021 17:38:30 +0800
Subject: [PATCH] add sample usage of config router

---
 package.json            |  2 +-
 src/main.tsx            | 16 ++++++++++++++--
 src/routes/index.ts     | 14 +++++++++++++-
 src/views/ErrorPage.tsx |  7 +++++++
 vite.config.js          | 14 ++++++++++----
 yarn.lock               |  8 ++++----
 6 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 src/views/ErrorPage.tsx

diff --git a/package.json b/package.json
index ef784e0..2efa7a7 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@syy11cn/config-router": "^1.0.4",
+    "@syy11cn/config-router": "^1.0.5",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.2",
diff --git a/src/main.tsx b/src/main.tsx
index 1a53d1a..367ef79 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { RouterView } from '@syy11cn/config-router';
+import routes from './routes';
 
 ReactDOM.render(
   <React.StrictMode>
     <Router>
-      <App />
+      <RouterView
+        routes={routes}
+        onEnter={function (to: string, next: (path?: string) => void): void {
+          // Let '/' and '/404' go.
+          if (to === '/' || to === '/404') {
+            next();
+            return;
+          }
+          // Other routes would be redirected to '/404'
+          next('/404');
+        }}
+      ></RouterView>
     </Router>
   </React.StrictMode>,
   document.getElementById('root'),
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 9940052..d15448b 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,5 +1,17 @@
 import { routeType } from '@syy11cn/config-router';
+import App from '@/App';
+import ErrorPage from '@/views/ErrorPage';
 
-const routes: Array<routeType> = [];
+const routes: Array<routeType> = [
+  {
+    path: '/404',
+    component: ErrorPage,
+  },
+  {
+    path: '/',
+    exact: true,
+    component: App,
+  },
+];
 
 export default routes;
diff --git a/src/views/ErrorPage.tsx b/src/views/ErrorPage.tsx
new file mode 100644
index 0000000..0f24bd0
--- /dev/null
+++ b/src/views/ErrorPage.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const ErrorPage: React.FC = () => {
+  return <h1>404 Not Found</h1>;
+};
+
+export default ErrorPage;
diff --git a/vite.config.js b/vite.config.js
index b1b5f91..634be23 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index 3fec06d..600e571 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -363,10 +363,10 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@syy11cn/config-router@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@syy11cn/config-router/-/config-router-1.0.4.tgz#da614073cce0837039d00b978389f5baa3eb4765"
-  integrity sha512-5+pSqHZdX3CSfERG7BJ809xYs3mWh8Okt7uF0rqT6ppH1qqYBMhPwih/YyNIoSdbjAo+vhu+QTWwWGpcKS7igg==
+"@syy11cn/config-router@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@syy11cn/config-router/-/config-router-1.0.5.tgz#9b8d4761069bb4051ec1d5973142fdd8783dbf8f"
+  integrity sha512-/wqJhEHArxtaSY24LePVZ3HzlKzYjlywO9I8i8r/AaasgV3C8+0eDsiTCwgdYTE+QkrxhG5UEEMX/XKT5jQ+aQ==
   dependencies:
     react-router-dom "^5.3.0"