Add breadcrumb docs about #4106

components/breadcrumb/demo/router.md

@@ -8,15 +8,15 @@ title:
 
 ## zh-CN
 
-和 `react-router@2.x` 进行结合使用。
+和 `react-router@2+` 进行结合使用。
 
 ## en-US
 
-Used together with `react-router@2.x`.
+Used together with `react-router@2+`.
 
 ````jsx
 import { Router, Route, Link, hashHistory } from 'react-router';
-import { Breadcrumb } from 'antd';
+import { Breadcrumb, Alert } from 'antd';
 
 const Apps = () => (
   <ul className="app-list">
@@ -29,24 +29,15 @@ const Apps = () => (
   </ul>
 );
 
-const Home = props => (
+const Home = ({ routes, params, children }) => (
   <div>
     <div className="demo-nav">
       <Link to="/">Home</Link>
       <Link to="/apps">Application List</Link>
     </div>
-    {props.children || 'Home'}
+    {children || 'Home Page'}
-    <div
+    <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
-      style={{
+    <Breadcrumb routes={routes} params={params} />
-        marginBottom: 15,
-        marginTop: 15,
-        paddingBottom: 15,
-        borderBottom: '1px dashed #ccc',
-      }}
-    >
-      Click the navigation above to switch:
-    </div>
-    <Breadcrumb {...props} />
   </div>
 );
 

components/breadcrumb/index.en-US.md

@@ -15,15 +15,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 ## API
 
-```html
-<Breadcrumb>
-  <Breadcrumb.Item>Home</Breadcrumb.Item>
-  <Breadcrumb.Item>Application Center</Breadcrumb.Item>
-  <Breadcrumb.Item>Application List</Breadcrumb.Item>
-  <Breadcrumb.Item>An Application</Breadcrumb.Item>
-</Breadcrumb>
-```
-
 | Property      | Description                              | Type              |  Optional | Default |
 |-----------|-----------------------------------|-----------------|---------|--------|
 | routes    | The routing stack information of router | Array             |         | -      |
@@ -32,3 +23,18 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
 
 > `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
+
+### Use with browserHistory
+
+The link of Breadcrumb item contain `#` defaultly, you can use `itemRender` to make `browserHistory` Link.
+
+```jsx
+import { Link } from 'react-router';
+
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} />;
+```

components/breadcrumb/index.zh-CN.md

@@ -15,15 +15,6 @@ title: Breadcrumb
 
 ## API
 
-```html
-<Breadcrumb>
-  <Breadcrumb.Item>首页</Breadcrumb.Item>
-  <Breadcrumb.Item>应用中心</Breadcrumb.Item>
-  <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-  <Breadcrumb.Item>某应用</Breadcrumb.Item>
-</Breadcrumb>
-```
-
 | 参数      | 说明                              | 类型              |  可选值 | 默认值 |
 |-----------|-----------------------------------|-----------------|---------|--------|
 | routes    | router 的路由栈信息               | Array             |         | -      |
@@ -32,3 +23,18 @@ title: Breadcrumb
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
 
 > 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
+
+### 和 browserHistory 配合
+
+和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
+
+```jsx
+import { Link } from 'react-router';
+
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} />;
+```