diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index c5e13bb7d7683e316a67028e00329da9ceaa82e7..51d1bb501d2021043eece59e1ed9ee3b3178933c 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -64,7 +64,23 @@ export default class PageHeader extends PureComponent {
     } = this.props;
     const clsString = classNames(styles.pageHeader, className);
     let breadcrumb;
-    if (routes && params) {
+    if (breadcrumbList && breadcrumbList.length) {
+      breadcrumb = (
+        <Breadcrumb className={styles.breadcrumb}>
+          {
+            breadcrumbList.map(item => (
+              <Breadcrumb.Item key={item.title}>
+                {item.href ? (
+                  createElement(linkElement, {
+                    [linkElement === 'a' ? 'href' : 'to']: item.href,
+                  }, item.title)
+                ) : item.title}
+              </Breadcrumb.Item>)
+            )
+          }
+        </Breadcrumb>
+      );
+    } else if (routes && params) {
       breadcrumb = (
         <Breadcrumb
           className={styles.breadcrumb}
@@ -73,7 +89,7 @@ export default class PageHeader extends PureComponent {
           itemRender={this.itemRender}
         />
       );
-    } else if (location && location.pathname && (!breadcrumbList)) {
+    } else if (location && location.pathname) {
       const pathSnippets = location.pathname.split('/').filter(i => i);
       const extraBreadcrumbItems = pathSnippets.map((_, index) => {
         const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
@@ -101,22 +117,6 @@ export default class PageHeader extends PureComponent {
           {breadcrumbItems}
         </Breadcrumb>
       );
-    } else if (breadcrumbList && breadcrumbList.length) {
-      breadcrumb = (
-        <Breadcrumb className={styles.breadcrumb}>
-          {
-            breadcrumbList.map(item => (
-              <Breadcrumb.Item key={item.title}>
-                {item.href ? (
-                  createElement(linkElement, {
-                    [linkElement === 'a' ? 'href' : 'to']: item.href,
-                  }, item.title)
-                ) : item.title}
-              </Breadcrumb.Item>)
-            )
-          }
-        </Breadcrumb>
-      );
     } else {
       breadcrumb = null;
     }
diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md
index b150039070a45724ddbc374360514389b83451f4..334d354c84626225581325ef3c6d5ab4e72b631a 100644
--- a/src/components/PageHeader/index.md
+++ b/src/components/PageHeader/index.md
@@ -18,12 +18,14 @@ order: 11
 | action | 操作区，位于 title 行的行尾 | ReactNode | - |
 | content | 内容区 | ReactNode | - |
 | extraContent | 额外内容区，位于content的右侧 | ReactNode | - |
+| breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
 | routes | 面包屑相关属性，router 的路由栈信息 | object[] | - |
 | params | 面包屑相关属性，路由的参数 | object | - |
-| breadcrumbList | 面包屑数据，配置了 `routes` `params` 时此属性无效 | array<{title: ReactNode, href?: string}> | - |
+| location | 面包屑相关属性，当前的路由信息 | object | - |
+| breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - |
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
 | tabActiveKey | 当前高亮的 tab 项 | string | -  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
 
-> 面包屑的配置方式有两种，一是结合 `react-router`，通过配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)；二是直接配置 `breadcrumbList`。 你也可以将 `routes` 及 `params` 放到 context 中，`PageHeader` 组件会自动获取。
+> 面包屑的配置方式有三种，一是直接配置 `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 中，组件会自动获取。