Adjust the router to automatically add the current language prefix be…

…fore the pathname in push and replace. Added `pathMatchRegexp` to match routes and regexp if the route prefix is ignored
jlcao · Sep 15, 2018 · c5724f2 · c5724f2
1 parent d58b6ce
commit c5724f2
Show file tree

Hide file tree

Showing 20 changed files with 403 additions and 295 deletions.
diff --git a/package.json b/package.json
@@ -79,6 +79,8 @@
     "localeDir": "src/locales",
     "srcPathDirs": [
       "src/pages",
+      "src/layouts",
+      "src/components",
       "src/layouts"
     ],
     "format": "minimal",
@@ -96,7 +98,7 @@
     "start": "umi dev",
     "test": "cross-env BABELRC=none umi test",
     "prettier": "prettier --write 'src/**/*'",
-    "precommit": "lint-staged && npm run test",
+    "precommit": "lint-staged",
     "add-locale": "lingui add-locale",
     "extract": "lingui extract"
   }

diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js
@@ -1,88 +1,103 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
 import { Link } from 'react-router-dom'
 import pathToRegexp from 'path-to-regexp'
-import { queryArray } from 'utils'
+import { queryArray, addLangPrefix } from 'utils'
+import { withI18n } from '@lingui/react'
 import styles from './Layout.less'
 
-const Bread = ({ menu, location }) => {
-  // 匹配当前路由
-  let pathArray = []
-  let current
-  for (let index in menu) {
-    if (
-      menu[index].route &&
-      pathToRegexp(menu[index].route).exec(location.pathname)
-    ) {
-      current = menu[index]
-      break
-    }
-  }
-
-  const getPathArray = item => {
-    pathArray.unshift(item)
-    if (item.bpid) {
-      getPathArray(queryArray(menu, 'id', item.bpid))
+@withI18n()
+class Bread extends PureComponent {
+  render() {
+    const { menu, location, i18n } = this.props
+    // 匹配当前路由
+    let pathArray = []
+    let current
+    for (let index in menu) {
+      if (
+        menu[index].route &&
+        pathToRegexp(menu[index].route).exec(location.pathname)
+      ) {
+        current = menu[index]
+        break
+      }
     }
-  }
 
-  let paramMap = {}
-  if (!current) {
-    pathArray.push(
-      menu[0] || {
-        id: 1,
-        icon: 'laptop',
-        name: 'Dashboard',
+    const getPathArray = item => {
+      pathArray.unshift(item)
+      if (item.bpid) {
+        getPathArray(queryArray(menu, 'id', item.bpid))
       }
-    )
-    pathArray.push({
-      id: 404,
-      name: 'Not Found',
-    })
-  } else {
-    getPathArray(current)
+    }
 
-    let keys = []
-    let values = pathToRegexp(current.route, keys).exec(
-      location.pathname.replace('#', '')
-    )
-    if (keys.length) {
-      keys.forEach((currentValue, index) => {
-        if (typeof currentValue.name !== 'string') {
-          return
+    let paramMap = {}
+    if (!current) {
+      pathArray.push(
+        menu[0] || {
+          id: 1,
+          icon: 'laptop',
+          name: i18n.t`Dashboard`,
         }
-        paramMap[currentValue.name] = values[index + 1]
+      )
+      pathArray.push({
+        id: 404,
+        name: i18n.t`Not Found`,
       })
+    } else {
+      getPathArray(current)
+
+      let keys = []
+      let values = pathToRegexp(current.route, keys).exec(
+        location.pathname.replace('#', '')
+      )
+      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) => {
-    const content = (
-      <span>
-        {item.icon ? <Icon type={item.icon} style={{ marginRight: 4 }} /> : ''}
-        {item.name}
-      </span>
-    )
+    // 递归查找父级
+    const breads = pathArray.map((item, key) => {
+      const content = (
+        <span>
+          {item.icon ? (
+            <Icon type={item.icon} style={{ marginRight: 4 }} />
+          ) : (
+            ''
+          )}
+          {item.name}
+        </span>
+      )
+      return (
+        <Breadcrumb.Item key={key}>
+          {pathArray.length - 1 !== key ? (
+            <Link
+              to={
+                addLangPrefix(
+                  pathToRegexp.compile(item.route || '')(paramMap)
+                ) || '#'
+              }
+            >
+              {content}
+            </Link>
+          ) : (
+            content
+          )}
+        </Breadcrumb.Item>
+      )
+    })
+
     return (
-      <Breadcrumb.Item key={key}>
-        {pathArray.length - 1 !== key ? (
-          <Link to={pathToRegexp.compile(item.route || '')(paramMap) || '#'}>
-            {content}
-          </Link>
-        ) : (
-          content
-        )}
-      </Breadcrumb.Item>
+      <div className={styles.bread}>
+        <Breadcrumb>{breads}</Breadcrumb>
+      </div>
     )
-  })
-
-  return (
-    <div className={styles.bread}>
-      <Breadcrumb>{breads}</Breadcrumb>
-    </div>
-  )
+  }
 }
 
 Bread.propTypes = {