React19-Admin后台管理系统|vite8+react19+arco+zustand通用后台模板

原创react19.2+react-router7+arcoDesign高颜值后台管理解决方案。

react19-web-admin：基于vite8.1构建react19.x后台系统项目。使用react19 hooks+arco-design+echarts+zustand5等技术，支持light+dark主题、3种通用模板、国际化、路由/状态管理、页面缓存，图表/表格/表单/鉴权/错误页等。

未标题-home

image

Vite8-Vue3-Admin网页版后台模板|vue3.5+pinia3+echarts后台管理系统

vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

p1

使用技术

  • 编辑器：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

p2

p3

项目特性

🚀 最新前端技术栈react19 hooks、vite8.1、zustand5、react-router v7、sass
🌍 内置明亮/暗黑模式一键切换，支持多语言（i18n）动态切换
🧩 内置3个模板布局风格
🧭 支持页面KeepAlive缓存机制
⚡ 支持动态路由鉴权验证
📚 支持tabs多标签页切换路由页面
🎨 优雅轻盈react组件库arco-design

p4

项目结构目录

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

360截图20260707100319610

image

React19-Admin网页版后台管理模板同步到原创作品集，感谢支持~

React19+Arco+Zustand+Echarts后台管理系统解决方案

360截图20260707115312637

未标题-hh1

未标题-hh

image

项目入口模板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

360截图20260707100508978

360截图20260707100540171

360截图20260707115359429

360截图20260707115412197

React19-Admin布局模板

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

image

image

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

360截图20260707115456214

360截图20260707115508808

360截图20260707115520074

360截图20260707115552639

360截图20260707115605089

360截图20260707115605090

360截图20260707115630098

360截图20260707115645945

360截图20260707115709272

360截图20260707115709273

360截图20260707115725563

360截图20260707115747305

360截图20260707115805779

360截图20260707115904728

360截图20260707115925274

360截图20260707115944297

360截图20260707120009369

image

react-router v7路由配置

image

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)

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

自定义Tabs多页签

image

image

支持面包屑快捷导航、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}</>
}

用于缓存组件的 UI 和状态，当页面切走再回来，状态不会丢失，组件不会重新挂载（例如表单不丢失、滚动位置保留等）。

image

整个项目知识点还是蛮多的，希望以上分享对大家有所帮助！

扫一扫，发现更多优质原创项目。

a88e58ebeaaf5f5a09a52686a388ed71_1289798-20251223105825806-389288273

往期项目推荐

最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Flutter3.41+DeepSeek V4智能AI应用|flutter3+getx+dio流式ai对话app模板

Electron41+Vite8+DeepSeek-V4桌面端AI助手|electron+vue3流式ai系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

Vite8-Vue3-Admin网页版后台模板|vue3.5+pinia3+echarts后台管理系统

vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统

最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

最新研发flutter3.41+bitsdojo_window+getx客户端仿微信聊天Exe应用

20190904-095146-5b53

 

posted @ 2026-07-08 11:51  xiaoyan2017  阅读(74)  评论(0)    收藏  举报
友情链接： UP主小店B站