在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/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. python选出一定数量的随机文件到某个文件夹

    import os import random import shutil def move_file(target_path, save_path, number): file_list = os. ...

  2. 使用Go语言操作HDFS

    HDFS(Hadoop分布式文件系统)是Hadoop生态系统的一部分,它是一个可扩展的分布式文件系统,被设计用于在大规模数据集上运行的应用程序 安装相关package: $ go get github ...

  3. Java的对象包装器 & 自动装箱

    有时,需要将 int 这样的基本类型转换为对象.所有的基本类型都有一个与之对应的类.例如,Integer 类对应基本类型 int.通常,这些类被称为包装器(wrapper).这些对象包装器类拥有很明显 ...

  4. P8936 月下缭乱 Sol

    考虑对操作的区间 \([l_i,r_i]\) 的下标进行扫描线而不是对操作的值扫.用 \(m\) 个 set 动态维护 \(x_i\) 对应的操作的下标集合,再用一个可删堆来维护当前所有操作 \(x_ ...

  5. Swift WisdomProtocol 面向协议编程(下)

    WisdomProtocol 面向协议编程(下) @[TOC] WisdomProtocol SDK 面向协议编程 # Welcome to use WisdomProtocol WisdomProt ...

  6. Linux系统下CUDA和cuDNN环境配置

    本人配置环境:linux服务器,ubantu18,显卡驱动11.0,安装CUDA11.0和cuDNN8.2.1. 一.安装CUDA11.0 1.先多找几篇博客,了解大概的流程,避免踩坑. 2.官网下载 ...

  7. 2022-07-11：给定n位长的数字字符串和正数k，求该子符串能被k整除的子串个数。 (n＜=1000，k＜=100)。 来自微众。4.11笔试。

    2022-07-11:给定n位长的数字字符串和正数k,求该子符串能被k整除的子串个数. (n<=1000,k<=100). 来自微众.4.11笔试. 答案2022-07-11: 动态规划. ...

  8. 2022-01-10：路径交叉。给你一个整数数组 distance 。 从 X-Y 平面上的点 (0,0) 开始，先向北移动 distance[0] 米，然后向西移动 distance[1] 米，向南

    2022-01-10:路径交叉.给你一个整数数组 distance . 从 X-Y 平面上的点 (0,0) 开始,先向北移动 distance[0] 米,然后向西移动 distance[1] 米,向南 ...

  9. 2021-11-29：给定一个单链表的头节点head，每个节点都有value(＞0)，给定一个正数m， value%m的值一样的节点算一类， 请把所有的类根据单链表的方式重新连接好，返回每一类的头节点

    2021-11-29:给定一个单链表的头节点head,每个节点都有value(>0),给定一个正数m, value%m的值一样的节点算一类, 请把所有的类根据单链表的方式重新连接好,返回每一类的 ...

  10. annotate()使用聚合计数、求和、平均数 raw()执行原生的SQL

    annotate()使用聚合计数.求和.平均数  raw()执行原生的SQL # 按老师分组,求课程的销量 Course.objects.values('Teacher').annotate(vol= ...