Optimize the Breadcrumb

src/components/PageHeader/index.js

@@ -60,21 +60,25 @@ export default class PageHeader extends PureComponent {
   // Generated according to props
   conversionFromProps = () => {
     const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props;
+
     return (
       <Breadcrumb className={styles.breadcrumb} separator={breadcrumbSeparator}>
-        {breadcrumbList.map(item => (
-          <Breadcrumb.Item key={item.title}>
-            {item.href
-              ? createElement(
-                  linkElement,
-                  {
-                    [linkElement === 'a' ? 'href' : 'to']: item.href,
-                  },
-                  item.title
-                )
-              : item.title}
-          </Breadcrumb.Item>
-        ))}
+        {breadcrumbList.map(item => {
+          const title = this.props.itemRender ? this.props.itemRender(item) : item.title;
+          return (
+            <Breadcrumb.Item key={item.title}>
+              {item.href
+                ? createElement(
+                    linkElement,
+                    {
+                      [linkElement === 'a' ? 'href' : 'to']: item.href,
+                    },
+                    title
+                  )
+                : title}
+            </Breadcrumb.Item>
+          );
+        })}
       </Breadcrumb>
     );
   };
@@ -85,14 +89,18 @@ export default class PageHeader extends PureComponent {
     const pathSnippets = urlToList(routerLocation.pathname);
     // Loop data mosaic routing
     const extraBreadcrumbItems = pathSnippets.map((url, index) => {
+      console.log(url);
       const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
       const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component;
+      const name = this.props.itemRender
+        ? this.props.itemRender(currentBreadcrumb)
+        : currentBreadcrumb.name;
       return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (
         <Breadcrumb.Item key={url}>
           {createElement(
             isLinkable ? linkElement : 'span',
             { [linkElement === 'a' ? 'href' : 'to']: url },
-            currentBreadcrumb.name
+            name
           )}
         </Breadcrumb.Item>
       ) : null;

src/components/PageHeader/index.md

@@ -28,6 +28,7 @@ order: 11
 | tabActiveKey | 当前高亮的 tab 项 | string | -  |
 | tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
+| itemRender | 自定义节点方法 | (menuItem) => ReactNode | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
 
 > 面包屑的配置方式有三种，一是直接配置 `breadcrumbList`，二是结合 `react-router@2` `react-router@3`，配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)，三是结合 `react-router@4`，配置 `location` `breadcrumbNameMap`，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中，组件会自动获取。

src/pages/layouts/BasicLayout.js

@@ -26,18 +26,18 @@ const { AuthorizedRoute, check } = Authorized;
  * @param {Object} menuData 菜单配置
  * @param {Object} routerData 路由配置
  */
-const getBreadcrumbNameMap = (menuData, routerData) => {
-  const result = {};
-  const childResult = {};
-  for (const i of menuData) {
-    if (!routerData[i.path]) {
-      result[i.path] = i;
-    }
-    if (i.children) {
-      Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
-    }
-  }
-  return Object.assign({}, routerData, result, childResult);
+const getBreadcrumbNameMap = (meun, router) => {
+  const routerMap = {};
+  const mergeMeunAndRouter = meunData => {
+    meunData.forEach(meunItem => {
+      routerMap[meunItem.path] = Object.assign(meunItem, router);
+      if (meunItem.children) {
+        mergeMeunAndRouter(meunItem.children);
+      }
+    });
+  };
+  mergeMeunAndRouter(meun);
+  return routerMap;
 };
 
 const query = {
@@ -68,6 +68,7 @@ const query = {
 class BasicLayout extends React.PureComponent {
   getContext() {
     const { location, routerData, menuData } = this.props;
+    console.log(getBreadcrumbNameMap(menuData, routerData));
     return {
       location,
       breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),

src/pages/layouts/PageHeaderLayout.js

@@ -18,6 +18,12 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) =>
             key="pageheader"
             {...restProps}
             linkElement={Link}
+            itemRender={item => {
+              if (item.locale) {
+                return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
+              }
+              return item.name;
+            }}
           />
         );
       }}