共计 1214 个字符，预计需要花费 4 分钟才能阅读完成。
一. 实现左侧导航栏的二级路由
前言：本来打算是不应用 antd，只想用 Material UI 来实现左侧导航列表的折叠伸缩成果的，后果试了一上午，只能感叹不得不抵赖还是 antd 封装的后盾管理系统欠缺。
尽管应用 MaUI 也实现了相干的一些搭配，不过它封装的成果不够欠缺，它是利用 <collapes> 独自的组件搭配 <ListItem> 的 onclick 事件管制某个状态的变动操作 <collapes> 中的 in 属性的变动，来实现折叠伸缩的成果，然而很坑的是如果你想把整个右边菜单栏用数组渲染进去的时候，就会发现一个问题，某个列表的点击事件会把所有的列表全副开展，因为渲染列表的时候所有的 <collapes> 的 in 属性共用着一个状态，上面是我只点击了·商品·这个链接呈现的成果:
这是齐全不合乎我的预期的，尽管你能够给每个 <Collapse> 下面的 <ListItem> 创立一个独自的 onClick 事件，然而这是十分繁琐，不论是代码的复用性还是前面用数组渲染，都是很难治理的。（可能有好的方法然而以目前我的程度来说临时办不到，当前有机会可能会更改本篇文章）。
故果决采纳 antd 的组件。
因为 antd 把折叠关上的成果封装在了独自的组件内，所以各个组件互相都没影响
这样就清新多了.
接下来去路由表里设置二级路由。创立以下文件夹，并且创立相应的.jsx 文件，别离对应咱们后续须要用到的各个局部。
在这里再强调一下：
这些路由组件，都是 dashboard 页面的子路由，所以咱们就路由表的 <Dashboard> 组件的路由上面创立子路由就能够了.
同样的情理，想用就得先引入:
顺次设置以下子路由，不要忘了 children 对象的属性是一个数组。
而后去对应的中央增加 <Link> 标签, 这里我把 key 换成路由门路了，这不是必须的。
（图表页面同样的情理，图片太大就不放进来了）
二. 列表渲染的优化
当初尽管看到了页面的成果，然而这样的列表是死的，不不便复用。咱们须要把它通过向之前的 todolist 案例一样，通过数组把它渲染进去。
首先须要做的是，察看这个列表的构造，思考数组里须要有哪些值。在 Config 文件夹下创立 siderBarList 文件夹
我晓得了须要渲染用到的变量是这些，而我的 <Item> 组件的 key 和 <Link> 组件的 path 是一样的，所以能够只设置一个关键词 key 就能够了，icon用来寄存图标信息。
咱们先不必管折线图，先实现这一部分。
返会侧边栏组件，不须要思考，间接引入刚刚写好的变量
当初须要编写一个函数来主动选入这个数组，
1. 逐渐剖析，首先须要判断这个渲染的对象是否有二级路由，如果没有，间接渲染出 <Menu.Item> 即可。这个和惯例的 list 渲染没什么区别，上面即可渲染出没有二级路由的首页或者角色治理等。
2. 如果有二级路由的话，咱们就须要思考二次渲染，
这里应用了函数递归调用本身，其实这里就相当于从新写了这行代码而已，须要认真去了解一下。
看一下页面成果，并没有报错
