react19+arco+zustand5+react-activation简约后台管理模板

原创

andy2018

发布于 2026-07-04 12:04:18

830

文章被收录于专栏：h5h5

原创React19 + Vite8 + react-activation0.13.4 + Zustand5 + react-router-dom v7搭建web版轻量级Admin管理系统模板。

内置3种布局模板、浅色/暗黑模式、国际化、多级路由菜单、路由/状态管理、tabs标签栏、keepalive路由页面缓存、主题配色切换等功能。

项目技术知识

react: ^19.2.7
react-dom: ^19.2.7
react-router-dom: ^7.18.0
@arco-design/web-react: ^2.66.15
zustand: ^5.0.14
react-activation: ^0.13.4
vite: ^8.1.0
sass: ^1.101.0
clsx: ^2.1.1
nprogress: ^0.2.0

项目功能特性

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

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

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

🧩 内置3个模板布局风格

🧭 支持页面KeepAlive缓存机制

⚡ 支持动态路由鉴权验证

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

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

项目结构框架

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}>
      <AliveScope>
        <HashRouter>
          <AppLoaded />
        </HashRouter>
      </AliveScope>
    </ConfigProvider>
  )
}

export default App