🧐[问题] ProLayout的route配置二级菜单下的icon属性不生效

[tseking]

🧐 问题描述

ProLayout的route配置，二级菜单下的icon属性不生效，官方Demo里也能看到问题

💻 示例代码

🚑 其他信息

[chenshuai2144]

ProLayout 不支持在二级菜单中设置 icon 属性，这是设计需求。如果你想实现二级菜单有 icon 的效果，可以使用 menuItemRender 方法自定义菜单的渲染。

首先，在你的路由配置中为每个路由新增一个 name 字段，用于给 ProLayout 进行菜单渲染。

接下来，修改 src/layouts/index.tsx 文件，使用 ProLayout 组件，并配置 menuItemRender 方法来处理菜单的渲染逻辑。具体代码如下：

import { ProLayout } from '@ant-design/pro-layout';
import { Link, Outlet, useAppData, useLocation } from 'umi';

export default function Layout() {
  const { clientRoutes } = useAppData();
  const location = useLocation();
  return (
    <ProLayout
      route={clientRoutes[0]}
      location={location}
      title="Umi x Ant Design"
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}
    >
      <Outlet />
    </ProLayout>
  );
}

以上代码中，我们使用了 useAppData 来获取全局客户端路由 clientRoutes，并将其传递给 ProLayout 组件的 route 属性。同时，我们还通过 useLocation 获取到当前页面的路径信息，并将其传递给 ProLayout 组件的 location 属性，以决定哪个菜单应该高亮。

最后，我们使用 menuItemRender 方法来自定义菜单的渲染逻辑。在该方法中，我们判断菜单项是否为链接或者是否有子菜单，如果是则使用默认渲染，否则使用 Link 组件来处理路由跳转。

然后，你可以根据自己的需求在 menuItemRender 方法中进行进一步的修改，例如添加 icon 属性。

[BluesVN]

<Outlet />

用了你的代码勉强能通了 ，和上一个版本自定义prolayout做了较大的改动，但是自己看文档去试坑很多的， 这中用法必须使用 而不能是{children}