在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/page3/1，这种的，并没有选中到/page3里面的/page3/1，这个地方来，所以我们需要解决的就是这几个问题：

思路如下：

 // 拿着currentRoute.pathname 跟items数组里面的每一个children来进行对比，如果找到了值相等的，就要他的上一级的key

   // 将key放到openKeys的数组的元素作为一个初始值
 
 
因为可能循环的里面获取children对象可能为空，所以这里需要加上感叹号，还需要在tsconfig.json中进行添加一行代码：

    "suppressImplicitAnyIndexErrors": true
 

加完之后，就不会爆红了，并且正常运行：

React后台管理系统11 配置项目初始化展开代码的更多相关文章

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

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

  2. 【共享单车】—— React后台管理系统开发手记：城市管理和订单管理

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. 【共享单车】—— React后台管理系统开发手记：AntD Form基础组件

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

  10. 《React后台管理系统实战 ：四》产品分类管理页：添加产品分类、修改(更新)产品分类

    一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...

随机推荐

  1. 二进制安装Kubernetes（k8s） v1.26.1 IPv4/IPv6双栈 可脱离互联网

    二进制安装Kubernetes(k8s) v1.26.1 IPv4/IPv6双栈 可脱离互联网 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star ...

  2. [中间件]Fastjson [转载]

    1 Fastjson的安全漏洞 本段摘自: fastjson到底做错了什么?为什么会被频繁爆出漏洞? 前段时间,fastjson被爆出过多次存在漏洞,很多文章报道了这件事儿,并且给出了升级建议. 但是 ...

  3. CVE-2022-21454:漏洞整改mysql5.7.37升级至5.7.38 tar包升级

    问题描述:对数据库服务器进行漏扫,发现一些中高位漏洞需要整改,有些数据库需要升级到最新版 漏洞修改指导链接:https://www.oracle.com/security-alerts/cpuapr2 ...

  4. VMware另一个程序锁定文件的一部分，进程无法访问

    问题描述:搭建RAC11g,在做共享磁盘的时候,节点2要共享节点1的磁盘,但是有一个问题,节点2关机之后,再打开,是有一个访问节点1的磁盘的过程,如果访问失败,就会开不了机器 rac1加的三个磁盘: ...

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

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

  6. 极简组调度-CGroup如何限制cpu

    1. 说明 1> linux内核关于task调度这块是比较复杂的,流程也比较长,要从源码一一讲清楚很容易看晕,因此需要简化,抓住主要的一个点,抛开无关的部分才能讲清楚核心思想 2> 本篇文 ...

  7. Semantic Kernel 入门系列：📅 Planner 计划管理

    Semantic Kernel 的一个核心能力就是实现"目标导向"的AI应用. 目标导向 "目标导向"听起来是一个比较高大的词,但是却是实际生活中我们处理问题的 ...

  8. Docker Compose 部署 Jenkins

    Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具 Jenkins应用广泛,大多数互联网公司都采用Jenkins配合GitLab.Docker.K8s作为实现D ...

  9. Qt 加载 libjpeg 库出现“长跳转已经运行”错误

    继上篇 Qt5.15.0 升级至 Qt5.15.9 遇到的一些错误 篇幅有点长,先说解决方法,在编译静态库时加上 -qt-libjpeg,编译出 libjpeg 库后,在项目中使用 #pragma c ...

  10. 2022CSP游记

    目录 CSP-J2022 7:45 8:15 8:27 8:38 9:12 9:23 10:34 11:57 中午 CSP-S2022 2:27 4:15 6:12 估分 普及 提高 自查 出分 废物 ...