在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/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. C++/Qt网络通讯模块设计与实现(六)

    前面章节主要讲述网络通讯客户端的实现,各位小伙伴需认真阅读以及理解,理会其中的思想,有疑问的地方可及时给我私信,我都会非常认真地解答大家的疑惑. C++/Qt网络通讯模块设计与实现(一) C++/Qt ...

  2. [数据库/MySQL]解决异常：Data truncation: Truncated incorrect DOUBLE value: 'dc5'

    1 场景复现 MySQL: 5.7.24-27 表结构 (两张独立的表) [表 RRR1] CREATE TABLE `RRR1` ( `R1` float NOT NULL COMMENT 'R1' ...

  3. [J2EE]Spring MVC中访问静态资源[转]

    1 文献来源 SpringMVC访问静态资源的三种方式(转) - 博客园 SpringMVC访问静态资源的三种方式 + 提供解决方案的原作者 2 前言 2.1 访问不到静态资源起因 如果web.xml ...

  4. Disruptor-简单使用

    前言 Disruptor是一个高性能的无锁并发框架,其主要应用场景是在高并发.低延迟的系统中,如金融领域的交易系统,游戏服务器等.其优点就是非常快,号称能支撑每秒600万订单.需要注意的是,Disru ...

  5. DBA面试小结

    问题描述:一个DBA在面试过程中,面试官最喜欢提问哪些问题,经过这些天的面试经历,总结了一些面试经验. 普通的外包可能只有一轮技术面试再加一轮人资面试,外包项目一般急需用人,所以面试流程基本简化,合适 ...

  6. MySQL（五）配置文件、系统变量与MySQL架构

    1 配置文件的使用 my.cnf配置文件 /etc/my.cnf: [root@hadoop103 ~]# cat /etc/my.cnf # For advice on how to change ...

  7. （亲自实践）解决安装weditor报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xad in position 825

    升级weditor时,报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xad in position 825: illegal multib ...

  8. 2023-3-6 WEEK1 学习

    WEEK1 学习 WEB [NSSCTF 2022 Spring Recruit]babyphp <?php highlight_file(__FILE__); include_once('fl ...

  9. OpenStack云平台部署

    前言:本次部署采用系统的是Centos 8-Stream版,存储库为OpenStack-Victoria版,除基础配置,五大服务中的时间同步服务,七大组件中的nova服务,neutron服务,cind ...

  10. Velocity 不用愁！Velocity 系统的前端工程化之路

    Velocity是一个基于Java的Web页面模版引擎.十多年前,Velocity将Java代码从Web页面中分离出来,使得开发者能够并行网页开发和Java开发.随着十年前后端分离的浪潮涌动,回首再面 ...