🧐[问题 | question] 问下ant pro的layout 配置的route 的name 只能支持字符串么？

[cangsnage]

🧐 问题描述 | Problem description

ant pro的layout 配置的route 的name 只能支持字符串么？

💻 示例代码 | Sample code

我想让route 的那么可以展示Badge这个组件和可以支持ReactNode这样的类型

🚑 其他信息 | Other information

OS:

Node：

浏览器 | browser：

[chenshuai2144]

你可以打开 config.ts 的编译 可以吧 Badge 变以为 React .createElement(Badge),对于ant pro的layout配置的route的name，目前只支持字符串类型。你想要展示Badge组件并支持ReactNode类型，可以考虑在路由对象中添加一个自定义字段，如badge，来存储需要展示的Badge组件。然后在ProLayout的menuItemRender方法中根据badge字段来生成相应的菜单项。这样，你就可以在菜单上展示Badge组件了。例如：

{ path: "/", component: "index", name: "home", badge: "< Badge count={5} /> "},
{ path: "/docs", component: "docs", name: "docs" },
{ path: "/products", component: "products", name: "products", badge: <Badge dot /> },

在ProLayout的menuItemRender方法中根据badge字段来生成菜单项：

<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}
          {menuItemProps.badge}
        </Link>
      );
    }
    return defaultDom;
  }}
>
  <Outlet />
</ProLayout>

这样，当你设置了badge字段并传入相应的ReactNode类型组件后，菜单项就会展示相应的Badge组件了。

如果不行可以在 mentItemRender 里面手动的做 map，badge配置成一个 string，然后转化