我们在Menu组件身上添加一个点击事件：对应的函数写一个回调函数：获取当前对象的e的身上的key,

这里其实不难看出e就是当前点击时的menu对象，我们这里获取的是e的key，对应上面定义的属性。

此时修改上面配置的参数为/page1  /page2

需要使用useNavigate和OutLet,React自带的路由组件

然后将整个路由组件进行声明使用

此时还没有完成，我么需要修改router.tsx中的index.tsx，特别注意这里不要将children写成大写的！这是一个坑！

这样的话就可以在访问"/"根路径的时候，每次都到Page1路由组件里面了。

效果如下：

但是大家可以看到e.key参数爆红了，这时候我们就将他as 一个 TO 就行了，可以看ts的源码，他需要的是一个参数TO

解决了之后就没问题了，这时候我们需要将菜单设置为只有一个打开项要怎么做呢？

使用Menu自带的2个方法，onOpenChange方法 和 openKeys状态


效果如下：

React后台管理系统08 左侧菜单栏点击事件以及设置只有一个菜单展开项的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记：主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. 《React后台管理系统实战 ：一》：目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  3. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  4. 【共享单车】—— React后台管理系统开发手记：UI菜单各个组件使用（Andt UI组件）

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  5. 【ThinkPHP框架学习 】(2) --- 后台管理系统如何用iframe点击左边右边局部刷新

    如题:         在写后台管理系统时,需要实现后台界面的局部动态刷新.         左边的导航栏使用a标签进行设置,通过href和target属性的配合,就可以将iframe中的子页实现动态 ...

  6. 【共享单车】—— React后台管理系统开发手记：项目工程化开发

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  7. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  8. React 的 DOM 添加多个点击事件

    第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...

  9. 《React后台管理系统实战 零》：基础笔记

    day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...

  10. 《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

随机推荐

  1. 中心极限定理的模拟—R实现

    中心极限定理,是指概率论中讨论随机变量序列部分和分布渐近于正态分布的一类定理.这组定理是数理统计学和误差分析的理论基础,指出了大量随机变量近似服从正态分布的条件.它是概率论中最重要的一类定理,有广泛的 ...

  2. 多态、抽象、Object类

    1.方法重写要求:方法名相同.参数类型相同.返回值相同或其子类返回值相同,子类修饰符要不小于父类 2.方法重载要求:方法名相同.参数类型不同.返回值没有改变.修饰符无关 3.多态的前提是继承.多态是定 ...

  3. XXL-JOB定时任务框架(Oracle定制版)

    特点 xxl-job是一个轻量级.易扩展的分布式任务调度平台,能够快速开发和简单学习.开放源代码并被多家公司线上产品使用,开箱即用.尽管其确实非常好用,但我在工作中使用的是Oracle数据库,因为xx ...

  4. Rust -- 模式与匹配

    1. 模式 用来匹配类型中的结构(数据的形状),结合 模式和match表达式 提供程序控制流的支配权 模式组成内容 字面量 解构的数组.枚举.结构体.元祖 变量 通配符 占位符 流程:匹配值 --&g ...

  5. Shell脚本编程（二）

    Shell脚本编程(二) shell脚本编程中if.if else的使用以及一些常用到的操作符 if.if else使用方式:      1) if条件          if [ condition ...

  6. C# 手写识别方案整理

    书写识别,网上的大佬们都有输出. 书写识别存在的2个问题: 直接拿官网的案例(将 Windows Ink 笔划识别为文本和形状 - Windows apps | Microsoft Learn),会发 ...

  7. [C++提高编程] 3.8 set/ multiset 容器

    文章目录 3.8 set/ multiset 容器 3.8.1 set基本概念 3.8.2 set构造和赋值 3.8.3 set大小和交换 3.8.4 set插入和删除 3.8.5 set查找和统计 ...

  8. Github 自动化部署

    github action 自动化部署 一.创建github 账户 官方地址 点击进入 注册/登录 二.在项目目录下创建文件 .github\workflows固定不变 develop.yml文件名自 ...

  9. 手机端调试工具vConsole

    vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. vConsole 是框架无关的,可以在 Vue.React 或其他任何框架中使用. 现在 vConsole 是微信小程序的官方调 ...

  10. 2022-11-27：超过经理收入的员工。编写一个SQL查询来查找收入比经理高的员工。以下数据的结果输出是Joe，因为Joe是唯一挣得比经理多的雇员。 DROP TABLE IF EXISTS `em

    2022-11-27:超过经理收入的员工.编写一个SQL查询来查找收入比经理高的员工.以下数据的结果输出是Joe,因为Joe是唯一挣得比经理多的雇员. DROP TABLE IF EXISTS `em ...