当前位置: 首页 > news >正文

react antd tabs router 基础管理后台模版

在构建 React 后台管理系统时,使用标签页的方式展示路由是一种高效且用户友好的设计模式。这种实现方式通常允许用户在多个页面之间快速切换,并保留页面的状态,类似于浏览器的多标签页功能。

需求分析
1.动态标签页:根据用户的导航行为动态创建标签页。
2.标签页状态管理:需要管理哪些标签页已经打开,当前激活的标签页,以及关闭某些标签页的功能。
3.路由集成:每个标签页与 react-router-dom 的路由结合,切换标签页时也同步更新路由。

示例实现
以下是基于 React 和 react-router-dom 的后台管理系统,支持动态标签页和路由集成。

  1. 创建项目安装必要依赖
    确保安装了以下依赖:
npm create vite
npm install
npm install react-router-dom antd
  1. 完整代码实现
import React, { useState } from 'react'
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom'
import { Tabs, Layout, Menu } from 'antd'const { Header, Content } = Layout
const { TabPane } = Tabs// 模拟的页面组件
const Dashboard = () => <div>仪表盘内容</div>
const UserList = () => <div>用户列表内容</div>
const Settings = () => <div>系统设置内容</div>// 标签页的默认配置
const defaultTabs = [{ key: '/dashboard', label: '仪表盘', component: <Dashboard /> }]const AppLayout = () => {const navigate = useNavigate()const location = useLocation()// 标签页状态const [tabs, setTabs] = useState(defaultTabs)const [activeTabKey, setActiveTabKey] = useState(defaultTabs[0].key)// 动态添加标签页const addTab = (key, label, component) => {if (!tabs.some(tab => tab.key === key)) {setTabs([...tabs, { key, label, component }])}setActiveTabKey(key)navigate(key)}// 关闭标签页const removeTab = targetKey => {const newTabs = tabs.filter(tab => tab.key !== targetKey)setTabs(newTabs)if (activeTabKey === targetKey) {const nextTab = newTabs[newTabs.length - 1]if (nextTab) {setActiveTabKey(nextTab.key)navigate(nextTab.key)} else {setActiveTabKey('/dashboard')navigate('/dashboard')}}}return (<Layout style={{ height: '100vh' }}><Header><Menu theme='dark' mode='horizontal' defaultSelectedKeys={['/dashboard']}><Menu.Item key='/dashboard' onClick={() => addTab('/dashboard', '仪表盘', <Dashboard />)}>仪表盘</Menu.Item><Menu.Item key='/users' onClick={() => addTab('/users', '用户列表', <UserList />)}>用户列表</Menu.Item><Menu.Item key='/settings' onClick={() => addTab('/settings', '系统设置', <Settings />)}>系统设置</Menu.Item></Menu></Header><Content style={{ padding: '16px' }}>{/* 标签页 */}<Tabstype='editable-card'onChange={key => {setActiveTabKey(key)navigate(key)}}activeKey={activeTabKey}onEdit={(targetKey, action) => {if (action === 'remove') {removeTab(targetKey)}}}>{tabs.map(tab => (<TabPane tab={tab.label} key={tab.key} closable={tab.key !== '/dashboard'}>{tab.component}</TabPane>))}</Tabs>{/* 路由 */}<Routes><Route path='/dashboard' element={<Dashboard />} /><Route path='/users' element={<UserList />} /><Route path='/settings' element={<Settings />} /></Routes></Content></Layout>)
}const App = () => (<Router><AppLayout /></Router>
)export default App

功能点说明
1.动态标签页管理

标签页通过 tabs 数组动态维护,新增时向数组添加对象,关闭时从数组中移除对象。
使用 TabPane 的 closable 属性控制是否允许关闭标签页。

2.同步路由和标签页

点击菜单或切换标签页时,更新 activeTabKey 并通过 useNavigate 同步路由。
关闭标签页时,如果关闭的是当前激活的标签页,自动切换到最后一个标签页。

3.默认标签页

默认标签页(如仪表盘)永远存在,且不可关闭。

4.路由内容展示

Routes 定义了路由和对应的页面内容,标签页中渲染的组件会与路由匹配。

5.样式优化建议

1.标签页溢出时滚动
Tabs 自带滚动支持,当标签页过多时可以左右滚动:
<Tabs type="editable-card" size="small" tabBarGutter={4} />

2.页面布局优化

添加侧边栏(Sider)用于更复杂的导航。
使用 Content 的内边距和背景色控制页面内容区域样式。

扩展功能

持久化标签页
将标签页的状态保存到 localStorage,并在页面刷新时恢复。
useEffect(() => {const savedTabs = JSON.parse(localStorage.getItem("tabs")) || defaultTabs;setTabs(savedTabs);
}, []);useEffect(() => {localStorage.setItem("tabs", JSON.stringify(tabs));
}, [tabs]);

多级路由支持

在标签页中加载嵌套路由。

权限管理

根据用户权限动态控制可见的标签页和菜单。

通过以上实现,你可以轻松构建一个支持动态标签页、路由集成的后台管理系统,并扩展为更复杂的功能。

相关文章:

react antd tabs router 基础管理后台模版

在构建 React 后台管理系统时&#xff0c;使用标签页的方式展示路由是一种高效且用户友好的设计模式。这种实现方式通常允许用户在多个页面之间快速切换&#xff0c;并保留页面的状态&#xff0c;类似于浏览器的多标签页功能。 需求分析 1.动态标签页&#xff1a;根据用户的导…...

【数据结构——栈与队列】环形队列的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现环形队列的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化队列、销毁队列、判断队列是否为空、进队列…...

【数据结构——栈与队列】链栈的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现链栈的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...

GIT CLONE ERROR: remote: [session-ec426a86] Access denied

报错信息&#xff1a; remote: [session-ec426a86] Access denied 错误原因&#xff1a; 1.更换了不同的GIT仓或者账号 2.之前设置了默认账号密码信息 3. git init 只初始化了GIT项目&#xff0c;并没有清空原有的账号密码配置 处理方法&#xff1a; win11需要到个人文件…...

GitHub 正式收录 MoonBit 作为一门通用编程语言!核心用户突破三万!

MoonBit 编程语言正式被 Github 收录&#xff01;这对于一个仅有两年发展时间的编程语言来说是一种高度认可&#xff0c;期待未来由 MoonBit 编写的项目数量快速增长&#xff0c;早日成为首个由国人研发迈进 10 万➕ 用户的编程语言。 最近用户数已经接近 3 万&#xff08;数据…...

PHP中GD库的使用

由于我要用到php的验证码 <?php session_start();// 生成验证码 $random_code substr(md5(uniqid(mt_rand(), true)), 0, 6);// 将验证码保存到 session 中 $_SESSION[captcha] $random_code;// 创建图片 $font 6; $image_width 100; $image_height 40;// 创建图像 $…...

docker安装Elasticsearch和Kibana

上传文件 加载tar包 安装 1.安装elasticsearch 通过下面的Docker命令即可安装单机版本的elasticsearch&#xff1a; docker run -d \--name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \-e "discovery.typesingle-node" \-v es-data:/usr/share/elastics…...

【Linux】文件管理必备知识和基本指令

【Linux】文件管理必备知识和基本指令 什么是操作系统什么是文件什么是路径01. ls 指令02. pwd命令03. cd 指令04. touch指令05.mkdir指令&#xff08;重要&#xff09;&#xff1a;06.rmdir指令 && rm 指令&#xff08;重要&#xff09;&#xff1a;rmdir指令rm指令 0…...

欢迪迈手机商城设计与实现

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 题目&#xff1a;欢迪迈手机商城设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管…...

量化交易系统开发-实时行情自动化交易-3.4.2.3.数字货币市场深度数据

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取市场深…...

有序集合ZSET【Redis对象篇】

&#x1f3c6; 作者简介&#xff1a;席万里 ⚡ 个人网站&#xff1a;https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜&#xff0c;同时略懂Vue与React前端技术&#xff0c;也了解一点微信小程序开发。 &#x1f37b; 对计算机充满兴趣&#xff0c;愿意并且希望学习更多的技…...

力扣-图论-9【算法学习day.59】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…...

如何选择安全、可验证的技术?

澳大利亚信号局的澳大利亚网络安全中心 (ASD 的 ACSC) 发布了一份指导文件&#xff0c;题为《选择安全和可验证的技术》&#xff0c;旨在帮助组织在采购软件&#xff08;专有或开源&#xff09;、硬件&#xff08;例如物联网设备&#xff09;和云服务&#xff08;SaaS、MSP 服务…...

Allure在自动化测试中的应用

01 Allure的简介及使用 1、应用场景 自动化的结果一定是通过一个报告来进行体现 Allure 是一个独立的报告插件&#xff0c;生成美观易读的报告&#xff0c;目前支持Python、Java、PHP、C#等语言 为dev/QA 提供详尽的测试报告、测试步骤、日志&#xff0c;也可以为管理层提供统…...

C# 探险之旅:第十一节 - 循环(foreach):一场“遍历”奇幻岛的大冒险!

嘿&#xff0c;勇敢的探险家们&#xff01;欢迎来到C#奇幻岛的第十一站——“遍历”奇幻岛&#xff01;今天&#xff0c;我们要乘坐一艘叫做foreach的魔法船&#xff0c;去遍历&#xff08;也就是一个一个看过来&#xff09;岛上那些神秘的宝藏箱&#xff01;准备好了吗&#x…...

Ubuntu24.04配置STMTrack

项目地址&#xff1a;https://github.com/fzh0917/STMTrack 一、安装 CUDA 参考链接&#xff1a; Ubuntu24.04配置DINO-Tracker Ubuntu多CUDA版本安装及切换 由于之前在其他项目中已经安装了 CUDA12.1&#xff0c;这次需要安装另一个版本。 1. 查看安装版本 按照 requireme…...

【Java学习笔记】Map接口和常用方法

一、 Map接口实现类的 特点[很实用] key是自己存的java对象 value是一个固定的 //当有相同的 k ,就等价于替换. 二、 Map常用方法 &#xff08;根据键–>k&#xff09; 三、Map接口遍历方法 package com.hspedu.map_; import java.util.*; /** * author 韩顺平 * ver…...

uniapp支持App横竖屏开发总结

一、需求&#xff1a; app要支持重力感应自动切换横竖屏&#xff0c;并切换后样式不能错乱 二、实现 官方文档 官方Git manifest.json文件中 "app-plus" : {"screenOrientation" : ["portrait-primary","portrait-secondary","…...

【工作笔记】Lombok版本变化导致的反序列化异常

Lombok版本变化导致的反序列化异常 背景 因为安全性的考虑&#xff0c;最近在梳理旧系统的系统依赖。改动依赖时候还好&#xff0c;毕竟只是换掉不再合作公司的旧依赖&#xff0c;没敢动别的太多东西。不过没多久&#xff0c;测试团队就找来了… 排查问题之第一次跑偏 旧系…...

多模态大语言模型 MLLM 部署微调实践

1 MLLM 1.1 什么是 MLLM 多模态大语言模型&#xff08;MultimodalLargeLanguageModel&#xff09;是指能够处理和融合多种不同类型数据&#xff08;如文本、图像、音频、视频等&#xff09;的大型人工智能模型。这些模型通常基于深度学习技术&#xff0c;能够理解和生成多种模…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...