我们在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. vue之数组的方法

    目录 简介 filter方法 简介 本文会把遇到的数组的方法慢慢补充进来 filter方法 filter()方法是一个过虑方法 以下面的为例:列表dataList会每次取一个值,把值给匿名函数,并执行 ...

  2. window远程桌面

    此文档概述如何开启win8.win8.1系统的远程桌面连接服务,可以让我们从一台电脑远程连接的其他电脑! 同时按"win键+R键",再打开的运行对话框中输入"contro ...

  3. 1.springsecurity基于内存和数据库的认证

    1.总结: 昨天主要是使用security实现了基于内存的认证和基于数据库的认证(实际项目中使用): 在security的项目中,必须配置WebSecurityConfigurerAdaptor的实现 ...

  4. IDA 特征码生成和搜索脚本

    最近比较忙,就少写两句,直接附上源代码,其中的细节点就不再赘述,如有疑问,请留言. 一共就是实现了两个函数,一个用于搜索特征码 (SearchPattern),一个用于生成特征码 (GenerateF ...

  5. Go Home

    Go Home (https://www.luogu.com.cn/problem/AT_arc070_a) 比较需要理解题意的一个题目 看看题目解析:在0秒的时候有一只袋鼠在左右无限长的数轴上的原点 ...

  6. T-SQL基础教程Day3

    第三章 联接3.1交叉联接交叉联接是最简单的联接类型.交叉联接仅执行一个逻辑查询处理阶段--笛卡尔乘积将一个输入表的每一行与另一个表的所有行匹配SQL Server支持交叉联接的两种标准语法:ANSI ...

  7. SpringCloud Gateway 3.x 响应头添加 Skywalking TraceId

    在微服务架构中,一次请求可能会被多个服务处理,而每个服务又会产生相应的日志,且每个服务也会有多个实例.在这种情况下,如果系统发生异常,没有 Trace ID,那么在进行日志分析和追踪时就会非常困难,因 ...

  8. RTCP常见报文格式(申请I帧/RR/SR/SDES)

    本篇文章是基于对RTCP基本协议有所了解情况下,进行说明,因为RTCP在丢包重传(ARQ)方面需要使用 到,具体可以查看RTCP相关rfc文档或者博客.所以本篇文章主要是从抓包报文角度来看RTCP协议 ...

  9. 笔记九：线程间的通信(pthread_create()和pthread_self())

    linux高级编程之线程间的通信:(pthread_create().pthread_self()) 1.线程概念        线程包含了表示进程内执行环境必须得信息,其中包括进程中标识线程的线程I ...

  10. 2023-03-17：使用Go语言和FFmpeg库实现音频重采样解码，并将其保存为PCM格式的文件。

    2023-03-17:使用Go语言和FFmpeg库实现音频重采样解码,并将其保存为PCM格式的文件. 答案2023-03-17: 在音视频处理领域,常常需要对音频进行重采样和解码,以便于后续的处理和分 ...