2026原创自研React19+Vite8+ArcoDesign+Zustand中后台管理系统框架模板

原创

andy2018

发布于 2026-07-08 22:36:58

300

文章被收录于专栏：h5h5

经过一周高强度原创研发react19.2+react-router v7+arco-design+zustand5+react-activation+echarts等技术搭建网页版admin管理系统模板。

react19-admin支持浅色+暗色主题，提供3种常用布局模板，国际化、路由/状态管理、页面缓存、面包屑/标签栏导航，包含图表/表格/表单/权限/错误处理等常用业务模块。

项目知识点

编辑器：VScode
技术框架：react^19.2.7+react-router-dom^7.18.0
构建工具；vite^8.1.0
组件库：@arco-design/web-react^2.66.15
状态管理：zustand^5.0.14
路由页面缓存：react-activation^0.13.4
加载进度条：nprogress^0.2.0
图表组件：echarts^6.1.0
markdown编辑器：@uiw/react-md-editor^4.1.1
模拟数据：axios^1.18.1 + mockjs^1.1.0
样式管理：sass^1.101.0

功能特征

✨ 基于vite8.0构建工具搭建项目框架

🚀 最新前端技术栈react19 hooks、zustand5、react-router v7、sass

🌍 内置明亮/暗黑模式一键切换，支持多语言（i18n）动态切换

🧩 内置3个模板布局风格

🧭 支持页面KeepAlive缓存机制

⚡ 支持动态路由鉴权验证

📚 支持tabs多标签页切换路由页面

🎨 优雅轻盈react组件库arco-design

项目结构目录

最新vite8.1构建项目模板，采用react19 hooks语法编码页面。

项目入口App.jsx

import { useEffect, useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
import { AliveScope } from 'react-activation'
// 通过 ConfigProvider 组件实现国际化
import { ConfigProvider } from '@arco-design/web-react'
// 引入语言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'
import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'
import { useTitle } from '@/hooks/useTitle'
// 引入路由配置
import Router from './router'
function AppLoaded() {
  const { config: { theme }, setMode, setTheme } = appStore()
  // 设置网站标题
  useTitle()
  useEffect(() => {
    setMode()
    setTheme(theme)
  }, [theme])
  
  return (
    <AuthRouter>
      <Router />
    </AuthRouter>
  )
}
function App() {
  const { lang } = appStore()
  const locale = useMemo(() => {
    switch(lang) {
      case 'en':
        return enUS
      case 'zh-CN':
        return zhCN
      case 'zh-TW':
        return zhTW
      default:
        return zhCN
    }
  }, [lang])
  return (
    <ConfigProvider
      // 国际化
      locale={locale}
      // 全局设置组件默认配置
      componentConfig={{
        Card: {
          style: {borderRadius: 4, borderColor: 'var(--color-border)'}
        }
      }}
    >
      <HashRouter>
        <AliveScope>
          <AppLoaded />
        </AliveScope>
      </HashRouter>
    </ConfigProvider>
  )
}
export default App

react19-admin布局模板

内置3种通用布局结构模板。也可以在此基础上自行扩展布局。

import { useMemo } from 'react'
import clsx from 'clsx'
import { appStore } from '@/store/app'
// 引入布局模板
import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'
function Layout() {
  const { config: { layout, fullContent } } = appStore()
  // 布局模板
  const LayoutComponent = useMemo(() => {
    switch (layout) {
      case 'columns':
        return Columns
      case 'vertical':
        return Vertical
      case 'transverse':
        return Transverse
      default:
        return Columns
    }
  }, [layout])
  return (
    <div className={clsx('radmin__container', { 'is-full': fullContent })}>
      <LayoutComponent />
    </div>
  )
}

react-router v7路由配置

import { useRoutes, Navigate } from 'react-router-dom'

// 批量导入modules路由
const modules = import.meta.glob('./modules/*.jsx', { eager: true })
const patchRoutes = Object.keys(modules).map(key => modules[key].default).flat()

/**
 * useRoutes集中式路由配置
 * @param path 路由地址
 * @param key 跳转路由地址
 * @param redirect 重定向路由地址
 * @param element 页面模板
 * meta配置
 * @param meta.icon 菜单图标
 * @param meta.name 菜单标题(国际化控制)
 * @param meta.roles ==> 页面权限 ['admin', 'dev', 'test']
 * @param meta.isAuth 是否需要验证
 * @param meta.isHidden 是否隐藏路由菜单
 * @param meta.isKeepAlive 是否缓存页面
 * @param meta.isAffix 是否固定标签(tab标签不能关闭)
 */
export const routes = [
  {
    path: '/',
    element: <Navigate to="/home" replace={true} />,
    meta: {
      isWhite: true // 路由白名单
    }
  },
  ...patchRoutes,
  // 404模块
  {
    path: '*',
    element: <Navigate to="/error/404" />,
    meta: {
      isWhite: true
    }
  }
]

const Router = () => useRoutes(routes)

实现keep-alive缓存页面。

import { KeepAlive } from 'react-activation'
import { useLocation, matchRoutes } from 'react-router-dom'
import { appStore } from '@/store/app'
import NprogressLoading from './nprogress'

import { routes } from '@/router'

export function KeepAliveWrapper({ children }) {
  const { pathname } = useLocation()
  const { reloadPage, config: { keepAlive } } = appStore()

  // 获取当前匹配路由
  const matched = matchRoutes(routes, pathname)
  const route = matched?.[matched.length - 1]?.route

  const isCache = (route?.meta?.isKeepAlive ?? keepAlive) === true
  const cacheKey = route?.redirect || route?.key

  // 刷新标识
  const content = reloadPage ? <NprogressLoading /> : children
  
  if (isCache) {
    return (
      <KeepAlive cacheKey={cacheKey} name={cacheKey} saveScrollPosition='screen'>
        {content}
      </KeepAlive>
    )
  }
  return <>{content}</>
}

react自定义快捷tabs标签栏

react-activation实现页面keep-alive缓存，类似vue缓存功能。

外层使用 AliveScope — 提供缓存能力

目标组件 KeepAlive — 启用缓存

<AliveScope>
  <App />
</AliveScope>

实现一个

import { KeepAlive } from 'react-activation'
import { useLocation, matchRoutes } from 'react-router-dom'
import { appStore } from '@/store/app'
import NprogressLoading from './nprogress'
import { routes } from '@/router'
export function KeepAliveWrapper({ children }) {
  const { pathname } = useLocation()
  const { reloadPage, config: { keepAlive } } = appStore()
  // 获取当前匹配路由
  const matched = matchRoutes(routes, pathname)
  const route = matched?.[matched.length - 1]?.route
  const isCache = (route?.meta?.isKeepAlive ?? keepAlive) === true
  const cacheKey = route?.redirect || route?.key
  // 刷新标识
  const content = reloadPage ? <NprogressLoading /> : children
  
  if (isCache) {
    return (
      <KeepAlive cacheKey={cacheKey} name={cacheKey} saveScrollPosition='screen'>
        {content}
      </KeepAlive>
    )
  }
  return <>{content}</>
}