1. 支持无限级子菜单
  2. 根据路由，自动匹配当前路由的菜单组件
    1. selectedKeys
    2. openKeys

菜单数据格式

  • children 无限极嵌套子菜单
    • 对于一个父菜单来说，点击还意味着打开或关闭相应的子菜单，这就与点击跳转页面发生了冲突
    • 所以约定好：菜单的交互规范
      • 点击父菜单（包含 children 属性的菜单项）为打开或关闭子菜单
      • 点击子菜单（不包含 children 属性的菜单项）为跳转至相应页面
  • path 每个菜单项都代表着一个不同的页面路径，点击后会触发 url 的变化并跳转到对应的页面 ```jsx const menuData = [ {
    1.   name: "仪表盘",
    2.   icon: "dashboard",
    3.   path: "/dashboard",
    4.   children: [
    5.       {
    6.           name: "分析页",
    7.           path: "analysis",
    8.           children: [
    9.               {
    10.                   name: "实时数据",
    11.                   path: "realtime",
    12.               },
    13.               {
    14.                   name: "离线数据",
    15.                   path: "offline",
    16.               },
    17.           ],
    18.       },
    19.   ],
    }, ];

```

侧边栏菜单

菜单参考 https://github.com/AlanWei/react-sider