config: 🔧 新增路由管理react-router-dom v6

Author: guokaigdg

README.md

@@ -1,24 +1,22 @@
 <h1 align="center">react 模板</h1>
 <br/>
 
-
 ## 👨🏻‍💻 项目说明
+
 react 模板
 
 ## 🚀 技术栈
 
--   React
--   react-dom
+-   React v18
+-   react-dom v18
 -   React Hook
--   TypeScript
--   webpack
+-   TypeScript v4
+-   webpack v5
 -   axios
 -   mobx-react-lite
--   react-router-dom
--   react-router-config
+-   react-router-dom v6
 -   postcss-px-to-viewport
 
-
 ## ⌛️ 安装项目依赖
 
 ```
@@ -48,18 +46,20 @@ npm run build:prod  // 线上环境
 
 ## 💡 分支说明
 
-| 分支 | 说明 |
-| -- | -- |
-| main | 主分支 |
-| dev | 开发分支 |
+| 分支 | 说明     |
+| ---- | -------- |
+| main | 主分支   |
+| dev  | 开发分支 |
 
 ## 代码提交规范
+
 ```
 git <type>: <subject>
 git commit -m “feat: 项目初始化”
 ```
 
-### type参考: 
+### type 参考:
+
 ```
 fix       🐛 Bug修复
 feature   ✨ 引入新特性
@@ -80,15 +80,15 @@ merge     🔀 合并分支
 ## 📂 目录结构
 
 ```
-    ├── .vscode                         
+    ├── .vscode
     │   └──setting.json                 # 先于vscode全局的settings.json配置
     ├── doc                             # 开发文档记录
     ├── webpack                         # 打包编译
     │   └──config                       # webpack配置
     │       ├── webpack.common.js       # 基础配置
     │       ├── webpack.dev.js          # 开发环境配置
     │       └──webpack.prod.js          # 生产环境配置
-    ├── pubilc                          
+    ├── pubilc
     │   ├──favicon.ico                  # HTML图标
     │   └──index.html                   # HTML入口模板
     ├── src
@@ -107,7 +107,7 @@ merge     🔀 合并分支
     ├── .babelrc.js                     # babel配置
     ├── .env.json                       # 环境变量配置
     ├── .gitignore                      # git提交忽略文件
-    ├── .npmrc                          
+    ├── .npmrc
     ├── .prettierignore                 # prettierc忽略文件
     ├── .prettierrc                     # prettierc配置
     ├── .eslintrc.js                    # ESLint配置
@@ -118,5 +118,6 @@ merge     🔀 合并分支
 ```
 
 ## 技术栈说明
-- React18
-- TypeScript
+
+-   React18
+-   TypeScript

package-lock.json

@@ -107,6 +107,7 @@
     },
     "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.8.1"
     }
 }

package.json

@@ -1,11 +1,16 @@
 import React from 'react';
-import Home from '@/view/Home';
+import {useRoutes} from 'react-router-dom';
+import Tab from '@/view/Tab';
+import routes from '@/router';
 import '@/styles/index.scss';
 
 function App() {
+    // 通过useRoutes配置实现路由管理
+    const element = useRoutes(routes);
     return (
         <div className='app'>
-            <Home name='React App' />
+            <Tab />
+            {element}
         </div>
     );
 }

src/App.tsx

@@ -0,0 +1,7 @@
+import React, {Suspense, lazy} from 'react';
+
+const Suspenselazy = (props: any) => {
+    return <Suspense fallback={<>...</>}>{React.createElement(lazy(props))}</Suspense>;
+};
+
+export default Suspenselazy;

src/components/Suspenselazy.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {BrowserRouter} from 'react-router-dom';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement);
-
-root.render(<App />);
+root.render(
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+);

src/index.tsx

@@ -0,0 +1,45 @@
+/*
+ * react-router-dom v6 官方文档
+ * https://reactrouter.com/en/v6.3.0/getting-started/installation
+ */
+import React from 'react';
+import Suspenselazy from '@/components/Suspenselazy';
+import {Navigate, RouteObject} from 'react-router-dom';
+
+const Home = Suspenselazy(() => import(/* webpackChunkName:"" */ '@/view/Home'));
+const HomeOne = Suspenselazy(() => import(/* webpackChunkName:"homeOne" */ '@/view/Home/HomeOne'));
+const HomeTwo = Suspenselazy(() => import(/* webpackChunkName:"homeTwo" */ '@/view/Home/HomeTwo'));
+const Dashboard = Suspenselazy(() => import(/* webpackChunkName:"dashboard" */ '@/view/Dashboard'));
+const About = Suspenselazy(() => import(/* webpackChunkName:"about" */ '@/view/About'));
+
+const routes: RouteObject[] = [
+    {
+        path: '/',
+        element: <Navigate to='/home/one' /> // 重定向
+    },
+    {
+        path: '/home',
+        element: Home,
+        children: [
+            // 嵌套路由
+            {
+                path: '/home/one',
+                element: HomeOne
+            },
+            {
+                path: '/home/two',
+                element: HomeTwo
+            }
+        ]
+    },
+    {
+        path: '/dashboard',
+        element: Dashboard
+    },
+    {
+        path: '/about',
+        element: About
+    }
+];
+
+export default routes;

src/router/index.tsx

@@ -1,11 +1,10 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
 #root {
     .app {
-        height: 100vh;
-        background: #cccccc;
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        background: #e2e7e033;
     }
 }

src/styles/index.scss

@@ -0,0 +1,10 @@
+.about-root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    padding-top: 70px;
+    font-size: 50px;
+    background: #30afe0;
+}

src/view/About/index.scss

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.scss';
+
+const About = () => {
+    return (
+        <div className='about-root'>
+            <p>Hello About</p>
+        </div>
+    );
+};
+
+export default About;

src/view/About/index.tsx

@@ -0,0 +1,8 @@
+.dashboard-root {
+    & > span {
+        display: block;
+        width: 100%;
+        font-weight: 800;
+        font-size: 110px;
+    }
+}

src/view/Dashboard/index.scss

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.scss';
+
+const Dashboard = () => {
+    return (
+        <div className='dashboard-root'>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+            <span>hello world Dashboard </span>
+        </div>
+    );
+};
+
+export default Dashboard;

src/view/Dashboard/index.tsx

@@ -0,0 +1,11 @@
+.home-one-root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 1000px;
+    height: 800px;
+    font-size: 50px;
+    background: #c6e2ff;
+    border-radius: 10px;
+}

src/view/Home.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+
+const HomeOne = () => {
+    return <div className='home-one-root'>HomeOne</div>;
+};
+
+export default HomeOne;

src/view/Home/HomeOne/index.scss

@@ -0,0 +1,11 @@
+.home-two-root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 1000px;
+    height: 800px;
+    font-size: 50px;
+    background: #ffe7ba;
+    border-radius: 10px;
+}

src/view/Home/HomeOne/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+
+const HomeTwo = () => {
+    return <div className='home-two-root'>HomeTwo</div>;
+};
+
+export default HomeTwo;

src/view/Home/HomeTwo/index.scss

@@ -0,0 +1,18 @@
+.home-root {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    padding-top: 70px;
+
+    .home-tab {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        width: 300px;
+        height: 800px;
+        padding: 10px;
+        font-size: 25px;
+        background: #00bfff;
+        border-radius: 10px;
+    }
+}