Optimization and rewriting PrimaryLayout.

mock/_utils.js

@@ -3,17 +3,13 @@
  * @param   {array}         array   An array where all values are objects, like [{key:1},{key:2}].
  * @param   {string}        key     The key of the object that needs to be queried.
  * @param   {string}        value   The value of the object that needs to be queried.
- * @return  {object|null}   Return frist object when query success.
+ * @return  {object|undefined}   Return frist object when query success.
  */
 export function queryArray(array, key, value) {
   if (!Array.isArray(array)) {
-    return null
+    return
   }
-  const item = array.filter(_ => _[key] === value)
-  if (item.length) {
-    return item[0]
-  }
-  return null
+  return array.filter(_ => _[key] === value)
 }
 
 export const Constant = {

mock/menu.js → mock/route.js

@@ -87,11 +87,11 @@ const database = [
     name: 'Rechartst',
     icon: 'area-chart',
     route: '/chart/Recharts',
-  },
+  }
 ]
 
 module.exports = {
-  [`GET ${ApiPrefix}/menus`](req, res) {
+  [`GET ${ApiPrefix}/routes`](req, res) {
     res.status(200).json(database)
   },
 }

package.json

@@ -32,7 +32,8 @@
     "react-draft-wysiwyg": "^1.12.13",
     "react-helmet": "^5.2.0",
     "react-highcharts": "^16.0.2",
-    "recharts": "^1.1.0"
+    "recharts": "^1.1.0",
+    "store": "^2.0.12"
   },
   "devDependencies": {
     "@lingui/babel-preset-react": "^2.7.0",

src/components/Layout/Bread.js

@@ -1,108 +1,66 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
 import Link from 'umi/navlink'
-import pathToRegexp from 'path-to-regexp'
-import { queryArray, addLangPrefix, pathMatchRegexp, deLangPrefix } from 'utils'
+import withRouter from 'umi/withRouter'
 import { withI18n } from '@lingui/react'
-import styles from './Layout.less'
+import { pathMatchRegexp, queryAncestors } from 'utils'
+import styles from './Bread.less'
 
 @withI18n()
+@withRouter
 class Bread extends PureComponent {
-  render() {
-    const { menuList, location, i18n } = this.props
-    // 匹配当前路由
-    let pathArray = []
-    let current
-    for (let index in menuList) {
-      if (
-        menuList[index].route &&
-        pathMatchRegexp(menuList[index].route, location.pathname)
-      ) {
-        current = menuList[index]
-        break
-      }
-    }
-
-    const getPathArray = item => {
-      pathArray.unshift(item)
-      if (item.breadcrumbParentId) {
-        getPathArray(queryArray(menuList, 'id', item.breadcrumbParentId))
-      }
-    }
-
-    let paramMap = {}
-    if (!current) {
-      pathArray.push(
-        menuList[0] || {
-          id: 1,
-          icon: 'laptop',
-          name: i18n.t`Dashboard`,
-        }
-      )
-      pathArray.push({
-        id: 404,
-        name: i18n.t`Not Found`,
-      })
-    } else {
-      getPathArray(current)
-
-      let keys = []
-      let values = pathToRegexp(current.route, keys).exec(
-        deLangPrefix(location.pathname)
-      )
-      if (keys.length) {
-        keys.forEach((currentValue, index) => {
-          if (typeof currentValue.name !== 'string') {
-            return
-          }
-          paramMap[currentValue.name] = values[index + 1]
-        })
-      }
-    }
-
-    // 递归查找父级
-    const breads = pathArray.map((item, key) => {
+  generateBreadcrumbs = paths => {
+    return paths.map((item, key) => {
       const content = (
-        <span>
+        <Fragment>
           {item.icon ? (
             <Icon type={item.icon} style={{ marginRight: 4 }} />
-          ) : (
-            ''
-          )}
+          ) : null}
           {item.name}
-        </span>
+        </Fragment>
       )
+
       return (
         <Breadcrumb.Item key={key}>
-          {pathArray.length - 1 !== key ? (
-            <Link
-              to={
-                addLangPrefix(
-                  pathToRegexp.compile(item.route || '')(paramMap)
-                ) || '#'
-              }
-            >
-              {content}
-            </Link>
+          {paths.length - 1 !== key ? (
+            <Link to={item.route || '#'}>{content}</Link>
           ) : (
             content
           )}
         </Breadcrumb.Item>
       )
     })
+  }
+  render() {
+    const { routeList, location, i18n } = this.props
+
+    // Find a route that matches the pathname.
+    const currentRoute = routeList.find(
+      _ => _.route && pathMatchRegexp(_.route, location.pathname)
+    )
+
+    // Find the breadcrumb navigation of the current route match and all its ancestors.
+    const paths = currentRoute
+      ? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
+      : [
+          routeList[0],
+          {
+            id: 404,
+            name: i18n.t`Not Found`,
+          },
+        ]
 
     return (
-      <div className={styles.bread}>
-        <Breadcrumb>{breads}</Breadcrumb>
-      </div>
+      <Breadcrumb className={styles.bread}>
+        {this.generateBreadcrumbs(paths)}
+      </Breadcrumb>
     )
   }
 }
 
 Bread.propTypes = {
-  menu: PropTypes.array,
-  location: PropTypes.object,
+  routeList: PropTypes.array,
 }
 
 export default Bread

src/components/Layout/Bread.less

@@ -0,0 +1,16 @@
+.bread {
+  margin-bottom: 24px;
+
+  :global {
+    .ant-breadcrumb {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .bread {
+    margin-bottom: 12px;
+  }
+}