diff --git a/package-lock.json b/package-lock.json
index 48e782f..0a75da8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "mobx-react-lite": "^3.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.3.0"
+        "react-router-dom": "^6.3.0",
+        "uuid": "^8.3.2"
       },
       "devDependencies": {
         "@babel/core": "^7.18.10",
@@ -6233,7 +6234,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -11266,8 +11266,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "vary": {
       "version": "1.1.2",
diff --git a/package.json b/package.json
index 724cd47..06fbc40 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "mobx-react-lite": "^3.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
diff --git a/src/App.js b/src/App.js
index a7ef549..9e23c05 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,28 @@
 import React from "react"
-import { BrowserRouter, Route, Routes } from "react-router-dom"
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import RouterView from "./router/index"
+import config from './router/config'
 
-function App () {
+// import Login from "./pages/login/Login"
+
+
+function App() {
     return (
-        <BrowserRouter>
-        <Routes>
-        <Route path="/login" element={<Login />}></Route>
-        </Routes>
-        </BrowserRouter>
-                   
+        // <div className="App">
+        //     <BrowserRouter>
+        //         <RouterView routes={config}></RouterView>
+        //     </BrowserRouter>
+        // </div>
+
+        <RouterView/>
+
+        // <div>
+        //     <BrowserRouter>
+        //         <Routes>
+        //             <Route path='login' element={<Login />}></Route>
+        //         </Routes>
+        //     </BrowserRouter>
+        // </div>
     )
 }
 
diff --git a/src/router/Router.js b/src/router/Router.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/router/config.js b/src/router/config.js
new file mode 100644
index 0000000..45967b6
--- /dev/null
+++ b/src/router/config.js
@@ -0,0 +1,12 @@
+import { lazy } from "react"
+import { v4 as uuid } from 'uuid'
+
+const routes = [
+    {
+        id: uuid(),
+        path: '/login',
+        component: lazy(() => import('../pages/login/Login'))
+    }
+]
+
+export default routes
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..978902e
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,45 @@
+import React, {Suspense} from "react";
+import { Redirect, Route, Switch } from 'react-router-dom'
+import routes from './config'
+
+const RouterView = () => {
+    // const { routes } = props
+    // console.log(routes)
+
+    return <Suspense fallback="loading">
+        <Switch>
+            {
+                routes.map(route => {
+                if (route.redirect) {
+                    return <Route key={route.path}
+                                  path={route.path}
+                                  exact={route.exact}
+                            >
+                        <Redirect to={route.redirect}/>
+                    </Route>
+                } else {
+                    return <Route key={route.path}
+                                  path={route.path}
+                                  exact={route.exact}
+                                  component={route.component}
+                            >
+
+                    </Route>
+                }
+            })}
+        </Switch>
+    </Suspense>
+
+
+    // routes.map((item, index) => {
+    //     return (
+    //         <Routes key={item.id}>
+    //             <Route key={index} path={item.path}  />
+    //         </Routes>
+    //     )
+    // })
+}
+
+export default RouterView
+
+{/* <Routes key={item.id}></Routes> */ }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 6e22034..1670bb3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,5 +33,8 @@ module.exports = {
             template: "./index.html",
             filename: "./index.html"
         })
-    ]
+    ],
+    devServer: {
+        historyApiFallback: true
+      } 
 };
\ No newline at end of file