在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/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. String API(全)

    类型 名称 char charAt(int index)返回 char指定索引处的值. int codePointAt(int index)返回指定索引处的字符(Unicode代码点). int co ...

  2. JSF预热功能在企业前台研发部的实践与探索

    作者:京东零售 李孟东 00 导读 企业前台研发部包含了企业业务大部分的对外前台系统,其中京东VOP平台(开放平台)适合于自建内网采购商城平台的企业客户. 京东为这类客户专门开发API接口,对接到客户 ...

  3. RFM客户分类模型的应用——R语言

    RFM模型是衡量客户价值和客户创造利益能力的重要工具和手段.在众多的客户关系管理(CRM)的分析模式中,RFM模型是被广泛提到的.该机械模型通过一个客户的近期购买行为.购买的总体频率以及花了多少钱3项 ...

  4. kubernetes（k8s）安装命令行自动补全功能

    Ubuntu下安装命令 root@master1:~# apt install -y bash-completion Reading package lists... Done Building de ...

  5. 新一代自动化测试神器Playwright

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/4bedb73c.html 你好,我是测试蔡坨坨. 说到WebUI自动化测试,首当其冲的当属Selenium,在很长的一段时间 ...

  6. mysql 清空数据表id 重1开始 帝国cms清空数据表id 重1开始

    alter table phome_ecms_news auto_increment=1; alter table phome_ecms_news_check auto_increment=1; al ...

  7. Java全栈开发/API

    2023/4/16 记录我学习的网站 前端 vuejs axios异步请求 微信开发者文档 uniapp开发文档 快速参考备忘清单 免费前端接口 读取json vant4UI cubeUI mintU ...

  8. [C++基础入门] 2、数据类型

    文章目录 2 数据类型 2.1 整型 2.2 sizeof关键字 2.3 实型(浮点型) 2.4 字符型 2.5 转义字符 2.6 字符串型 2.7 布尔类型 bool 2.8 数据的输入 2 数据类 ...

  9. Ansible中的变量

    Ansible中的变量 目录 Ansible中的变量 变量概述 变量定义的方式 变量的优先级 如何定义变量 playbook中定义变量 vars_file中定义变量 系统内置变量 inventory定义 ...

  10. 2022-09-27：给定一个棵树， 树上每个节点都有自己的值，记录在数组nums里， 比如nums[4] = 10，表示4号点的值是10， 给定树上的每一条边，记录在二维数组edges里， 比如ed

    2022-09-27:给定一个棵树, 树上每个节点都有自己的值,记录在数组nums里, 比如nums[4] = 10,表示4号点的值是10, 给定树上的每一条边,记录在二维数组edges里, 比如ed ...