在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/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. 帝国cms7.5和7.2 搜素模板支持 php和灵动标签以及不起作用

    帝国CMS搜索模板不支持动态标签调用,从7.0到7.2再到刚发布的7.5,帝国官方团队始终没解决这个问题,这很不方便,但是帝国的强大可以让我们忽略这个问题,今天老威就把这个bug的解决方法说一下. 第 ...

  2. 如何在 vue3 中使用 jsx/tsx?

    我们都知道,通常情况下我们使用 vue 大多都是用的 SFC(Signle File Component)单文件组件模式,即一个组件就是一个文件,但其实 Vue 也是支持使用 JSX 来编写组件的.这 ...

  3. 做个清醒的程序员之拥抱AI

    阅读时长约 13 分钟,共计约 3100个字. 昨天我体验了AI自动生成短视频,具体说来,首先我在域名为FreeGPT的免费网站,向它提问,然后生成一段文字.之后呢,再用剪映里面的"图文成片 ...

  4. 快速上手Linux核心命令（一）：核心命令简介

    前言 众所周知,Linux在服务器中占用不可替代的位置.大多数互联网公司,服务器都是采用的Linux操作系统.而Linux是一个主要通过命令行来进行管理的操作系统.只有熟练掌握Linux核心命令,在使 ...

  5. ES的索引结构与算法解析

    作者:京东物流 李洪吉 提到ES,大多数爱好者想到的都是搜索引擎,但是明确一点,ES不等同于搜索引擎.不管是谷歌.百度.必应.搜狗为代表的自然语言处理(NLP).爬虫.网页处理.大数据处理的全文搜索引 ...

  6. Python OOP之继承封装多态

    面向对象的三大特征 继承 封装 多态 继承 子类可以使用父类定义的内容或者行为 继承的实现 父类,基类,超类,被继承的类,Base Class,Super Class 子类:有继承行为的类 所有类都必 ...

  7. 深度学习-05(tensorflow模型保存与加载、文件读取、图像分类：手写体识别、服饰识别)

    文章目录 深度学习-05 模型保存于加载 什么是模型保存与加载 模型保存于加载API 案例1:模型保存/加载 读取数据 文件读取机制 文件读取API 案例2:CSV文件读取 图片文件读取API 案例3 ...

  8. Spring 之bean的生命周期

    文章目录 IOC Bean的生命周期 运行结果 实例演示 实体类 实例化前后置代码 初始化的前后置代码 application.xml 总结 今天我们来聊一下Spring Bean的生命周期,这是一个 ...

  9. #PowerBi 10分钟学会，以X为结尾的聚合函数

    前言 在Power BI中,我们经常需要对数据进行聚合计算,比如求和.求平均.求最大值等. Power BI提供了一系列的聚合函数,可以用来对表中列的值进行聚合然后返回一个值.这些函数通常只需要一个参 ...

  10. Hardhat 开发框架 - Solidity开发教程连载

    Decert.me 要连载教程了, <Solidity 开发教程> 力求系统.深入的介绍 Solidity 开发, 同时这是一套交互式教程,你可以实时的修改教程里的合约代码并运行. 本教程 ...