一.实现左侧导航栏的二级路由
前言：本来打算是不应用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.如果有二级路由的话，咱们就须要思考二次渲染，
这里应用了函数递归调用本身，其实这里就相当于从新写了这行代码而已，须要认真去了解一下。
看一下页面成果，并没有报错