project

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

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

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>
     )
 }
 

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

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> */ }

webpack.config.js

@@ -33,5 +33,8 @@ module.exports = {
             template: "./index.html",
             filename: "./index.html"
         })
-    ]
+    ],
+    devServer: {
+        historyApiFallback: true
+      } 
 };