环境：Ant design pro v4 js 版本

以下代码为了演示动态菜单，从服务器获取菜单。

关键代码是：

1、声明变量

  const [menuData, setMenuData] = useState([]);

  const [loading, setLoading] = useState(true);

2、在初始化获取服务器数据

useEffect

3、layout使用动态数据

menuDataRender={() => menuData}

menu={{ loading }}

以下是全部代码

/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 *
 * @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { DefaultFooter, SettingDrawer } from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useIntl, connect, history } from 'umi';
// import { GithubOutlined } from '@ant-design/icons';
// import { Result, Button } from 'antd';
// import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
// import { getMatchMenu } from '@umijs/route-utils';
import logo from '../assets/logo.svg';
import { getMenu } from '@/services/user';


// const noMatch = (
//   <Result
//     status={403}
//     title="403"
//     subTitle="Sorry, you are not authorized to access this page."
//     extra={
//       <Button type="primary">
//         <Link to="/user/login">Go Login</Link>
//       </Button>
//     }
//   />
// );

/** Use Authorized check all menu item */
// const menuDataRender = (menuList) =>
//   menuList.map((item) => {
//     const localItem = {
//       ...item,
//       children: item.children ? menuDataRender(item.children) : undefined,
//     };
//     return Authorized.check(item.authority, localItem, null);
//   });

const defaultFooterDom = (
  <DefaultFooter
    copyright={`${new Date().getFullYear()} 瀚高基础软件股份有限公司出品`}
  />
);

const BasicLayout = (props) => {
  console.log('BasicLayout props ', props)
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;
  console.log('settings ',settings)
  const menuDataRef = useRef([]);
  const [menuData, setMenuData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
    getMenu()
      .then(data => {
        // const ss = [{
        //   "id": 1, "name": "系统设置", "path": "/sys", "authority": null,"icon":'icon-shouye',
        //   "routes": [{ "id": 2, "name": "模块管理", "path": "/sys/module", "authority": null }]
        // }]        
        setMenuData(data.obj || []);
        setLoading(false)
      });
  }, []);


  /** Init variables */
  const handleMenuCollapse = (payload) => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  }; // get children authority

  // const authorized = useMemo(
  //   () =>
  //     getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
  //       authority: undefined,
  //     },
  //   [location.pathname],
  // );
  const { formatMessage } = useIntl();
  return (
    <>
      <ProLayout
        logo={logo}
        // formatMessage={formatMessage}  //不在使用国际化
        // {...props}
        {...settings}
        onCollapse={handleMenuCollapse}
        onMenuHeaderClick={() => history.push('/')}
        menuItemRender={(menuItemProps, defaultDom) => {
          // console.log(menuItemProps, defaultDom)
          if (
            menuItemProps.isUrl ||
            !menuItemProps.path ||
            location.pathname === menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        breadcrumbRender={(routers = []) => [
          {
            path: '/',
            breadcrumbName: formatMessage({
              id: 'menu.home',
            }),
          },
          ...routers,
        ]}
        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0;
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          );
        }}
        footerRender={() => {
          if (settings.footerRender || settings.footerRender === undefined) {
            return defaultFooterDom;
          }
          return null;
        }}
        menuDataRender={() => menuData}
        menu={{ loading }}
        rightContentRender={() => <RightContent />}
        postMenuData={(menuData) => {
          menuDataRef.current = menuData || [];
          return menuData || [];
        }}
        /**
         * https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2540568
         */
        iconfontUrl="//at.alicdn.com/t/font_2540568_pdr87e98xfp.js"
      >
        {/* <Authorized authority={authorized.authority} noMatch={noMatch}> */}
        {children}
        {/* </Authorized> */}
      </ProLayout>
      <SettingDrawer
        settings={settings}
        onSettingChange={(config) =>
          dispatch({
            type: 'settings/changeSetting',
            payload: config,
          })
        }
      />
    </>
  );
};

export default connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);