我们在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. API获取商品评论?

    前言 小伙伴们好,前两天因为个人原因耽误了内容的更新,在这里和所有的小伙伴道个歉,今天CC和大家唠唠商品评论的这个话题,大家在网上购物的决策会因为<商品评论的好坏>吗,相信绝大的一部分的小 ...

  2. 使用drf的序列化类实现增删改查接口

    目录 什么是DRF 安装DRF 基于原生创建五个接口 基于rest_framework的增删改查 查询多条数据 流程 创建表 创建序列化类 创建视图类 增加路由 查询单条数据 序列化类不变 视图类定义 ...

  3. 四月八号java基础

    1.复合语句:JAVA语言不允许在两个嵌套的复合语句内声明同样的变量 2.注释:1)单行注释// 2)多行注释/*......*/3)/**......*/文件注释 3.else总是与之最近的if结构 ...

  4. Java Heap

    堆 堆是一种基于树的数据结构,是一种完全二叉树,堆中的所有的节点都按照特定的顺序排列. 在堆数据结构中,如果任意父节点的值都大于其子节点,则会产生一个大顶堆:反之,如果任意父节点的值都小于其子节点,则 ...

  5. IIS 部署.NET CORE 项目 出现 HTTP 错误 500.19 - Internal Server Error

    当出现这个错误时是因为服务器上没有.NET CORE对应的SDK以及运行时文件,我的.NET CORE版本是2.2,下载的就是2.2对应的文件. 附上.NET CORE2.2版本的下载链接 下载 .N ...

  6. 用Abp实现两步验证（Two-Factor Authentication，2FA）登录（二）：Vue网页端开发

    @ 目录 发送验证码 登录 退出登录 界面控件 获取用户信息功能 项目地址 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首 ...

  7. SQL concat_ws, collect_set, 和explode合并使用

    1. 背景 有一个这样的数据集:字段和字段的值是两列 目的是将这个数据转换成规整的一个特征是一列的数据: 2. 做法 第一步:先造出列 select ucid ,CASE WHEN type ='性别 ...

  8. ChatGPT API接口编程基础与使用技巧

    总结/朱季谦 趁着这周末空闲时间,在研读完OpenAi官网文档的基础上,及时总结了这篇<ChatGPT API接口编程基础与使用技巧>. 本文大部分内容是围绕编程方面,包括ChatGPT模 ...

  9. React框架使用

    一:使用Vite创建React项目 二:React中组件使用 import React, { Component, useState } from "react"; //使用cla ...

  10. Java方法的返回值及注意事项

    方法的返回值 为什么要有带返回值的方法呢? 调用处拿到方法的结果之后,才能根据结果进行下一步操作 带返回值方法的定义和调用: 如果在调用处,要根据方法的结果去编写另一段代码逻辑 为了在调用处拿到方法产 ...