Ant Design Pro V5 嵌套菜单

写在最前面，建议先不要使用v5，坑太多，最大问题在于文档写的不够具体

先上成果截图：

这里我使用的是V5，实现代码如下：

1.app.jsx

第一步：在app.jsx 的 layout里找到 childrenRender 这个方法，我这里是判断当前路由页面是否存在嵌套路由，具体的视各位情况而定

    childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {props?.location.pathname === '/demo/demo2' ? <SiderDemo {...props}/> : children}
        </>
      );
    },

2.SiderDemo.jsx 组件

看下面代码就能清楚，siderdemo组件是一层新的ProLayout

两个ProLayout套在一起，就实现了嵌套菜单

其中，最外层的左侧菜单相关配置都在app.jsx的layout方法里配置，这一点要搞清楚

import React from 'react';
import ProLayout,{PageContainer} from '@ant-design/pro-layout';
import {Link, useIntl, history} from 'umi';

class SiderDemo extends React.Component {
const complexMenu = [
  {
    path: '/demo/demo2/sever',
    name: '服务器管理',
    locale: 'menu.home',
  },
  {
    path: '/demo/demo2/cc',
    name: '存储管理',
    locale: 'menu.data_hui',
  },
  {
    path: '/data_ming',
    name: '物理机安装管理',
    locale: 'menu.data_ming',
  },
  {
    path: '/other',
    name: '统计报表管理',
    locale: 'menu.other',
  },
  {
    path: '/other',
    name: '管理与治理',
    locale: 'menu.other',
  },
  {
    path: '/other',
    name: 'Ip互换',
    locale: 'menu.other',
  },
];
  go = ({key}) => {
    history.push(key)
  }
  render() {
    return (
      <ProLayout
        navTheme="light"
        route={{routes: complexMenu}} // 内嵌菜单数据
        menuHeaderRender={false}
        style={{
          height: '400px',
        }}
        collapsedWidth={0}
        menuItemRender={(item, dom) => ( //切记：跳转方式，如果不声明pro是不知道如何跳转的
          <Link to={item.path}>{dom}</Link>
        )}
      >
        <div>{this.props.children}</div>
      </ProLayout>

    );
  }
}

export default SiderDemo;

ProLayout 相关Api地址：ProLayout - 高级布局 - ProComponents