add sample usage of config router

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",

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'),

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;

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;

vite.config.js

@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+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'),
+    },
+  },
+});

yarn.lock

@@ -363,10 +363,10 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@syy11cn/config-router@^1.0.4":
+"@syy11cn/config-router@^1.0.5":
-  version "1.0.4"
+  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@syy11cn/config-router/-/config-router-1.0.4.tgz#da614073cce0837039d00b978389f5baa3eb4765"
+  resolved "https://registry.yarnpkg.com/@syy11cn/config-router/-/config-router-1.0.5.tgz#9b8d4761069bb4051ec1d5973142fdd8783dbf8f"
-  integrity sha512-5+pSqHZdX3CSfERG7BJ809xYs3mWh8Okt7uF0rqT6ppH1qqYBMhPwih/YyNIoSdbjAo+vhu+QTWwWGpcKS7igg==
+  integrity sha512-/wqJhEHArxtaSY24LePVZ3HzlKzYjlywO9I8i8r/AaasgV3C8+0eDsiTCwgdYTE+QkrxhG5UEEMX/XKT5jQ+aQ==
   dependencies:
     react-router-dom "^5.3.0"