后台系统从零搭建(二)—— 系统架构设计1之路由封装

本系列从零搭建一个后台系统,技术选型React18 + ReactRouter7 + Vite4 + Antd5 + zustand + TS。 这个系列文章将会从零开始,一步一步搭建一个后台系统,这个系统将会包括登录、权限、菜单、用户、角色等功能。

系统架构设计包含:路由封装、Axios请求封装、环境变量封装、storage模块封装(sessionStorage、localStorage)、公共函数封装(日期、金额、权限...)、通用交互定义(删除二次确认、列表、面包屑...)、接口全貌概览等。

本文主要介绍系统架构设计之路由封装。

1 安装ReactRouter6

安装ReactRouter6,并封装路由。

bash 复制代码
pnpm add react-router-dom@6

2 路由配置,懒加载和Loading - src/router/index.tsx

新增views文件夹,用于存放页面组件,新增Home/index.tsxLogin/index.tsxError403/index.tsxError404/index.tsx页面组件。

tsx 复制代码
// src/router/index.tsx
import { createBrowserRouter, Navigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import Home from '@/views/Home'
import { Spin } from 'antd'

/**
 *  路由懒加载
 * 1. 通过 React.lazy 方法配合 import() 函数来实现路由懒加载,优化首屏加载速度
 * 2. Suspense 组件用于在路由组件加载过程中显示 loading 界面,  fallback 属性来指定loading组件,
 *    当路由组件加载完成后,自动隐藏 loading 组件,显示路由组件,优化用户体验
 */
const Login = lazy(() => import('@/views/Login'))
const Error404 = lazy(() => import('@/views/Error404'))
const Error403 = lazy(() => import('@/views/Error403'))

const SuspenseView = (View: React.ComponentType) => {
  return (
    <Suspense fallback={<Spin fullscreen size='default' tip='页面正在加载...' />}>
      <View />
    </Suspense>
  )
}

const routes = [
  {
    path: '/',
    element: SuspenseView(Home),
  },
  {
    path: '/login',
    // element: <Login />,
    element: SuspenseView(Login),
  },
  {
    path: '/403',
    element: <Error403 />,
  },
  {
    path: '/404',
    element: <Error404 />,
  },
  {
    path: '*',
    // 跳转到 404 页面
    element: <Navigate to='/404' />,
  },
]

const router = createBrowserRouter(routes)
export default router

3 路由展示 - App.tsx

Suspense也可以在App.tsx中使用,这样可以全局使用loading组件,但个人建议在路由中使用,这样可以更好的控制loading组件的展示。

tsx 复制代码
// src/App.tsx
import router from '@/router'
import { RouterProvider } from 'react-router-dom'
// import { Suspense } from 'react'
// import { Spin } from 'antd'

function App() {
  return (
    <div className='App'>
      {/* <Suspense fallback={<Spin fullscreen size='default' tip='页面正在加载...' />}> */}
      <RouterProvider router={router} />
      {/* </Suspense> */}
    </div>
  )
}
export default App

4 额外备注

路由可以通过路由组件,也可以通过API创建路由。

API创建组件就是上面的方式,通过createBrowserRouter创建路由,然后通过element属性指定组件,在App.tsx中通过RouterProvider提供路由。

tsx 复制代码
// src/router/index.tsx
import { createBrowserRouter } from 'react-router-dom'
const routes = [{ path: '/', element: <Home /> }]
const router = createBrowserRouter(routes)
export default router

// src/App.tsx
import router from '@/router'
import { RouterProvider } from 'react-router-dom'
function App() {
  return (
    <div className='App'>
      <RouterProvider router={router} />
    </div>
  )
}
export default App

路由组件的创建方式是通过Route组件,这种方式更加灵活,可以通过children属性传递子路由,可以通过element属性指定组件。

tsx 复制代码
// src/router/index.tsx
import { useRoutes } from 'react-router-dom'
const routes = [{ path: '/', element: <Home /> }]
// Router 组件
const Router = () => useRoutes(routes)
/* 这里的Router组件等同于下面的写法
  <Routes> 
    <Route path='/' element={<Home />} /> 
  </Routes>
*/
export default Router

// src/App.tsx
import Router from '@/router'
function App() {
  return (
    <div className='App'>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </div>
  )
}
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript