• Breadcrumb面包屑
    • 何时使用
    • 代码演示
    • API
      • Breadcrumb
      • Breadcrumb.Item
      • routes
      • 和 browserHistory 配合

    Breadcrumb面包屑

    显示当前页面在系统层级结构中的位置，并能向上返回。

    何时使用

    • 当系统拥有超过两级以上的层级结构时；

    • 当需要告知用户『你在哪里』时；

    • 当需要向上导航的功能时。

    代码演示

    Breadcrumb 面包屑 - 图1

    基本

    最简单的用法。

    1. import { Breadcrumb } from 'antd';
    3. ReactDOM.render(
    4.   <Breadcrumb>
    5.     <Breadcrumb.Item>Home</Breadcrumb.Item>
    6.     <Breadcrumb.Item>
    7.       <a href="">Application Center</a>
    8.     </Breadcrumb.Item>
    9.     <Breadcrumb.Item>
    10.       <a href="">Application List</a>
    11.     </Breadcrumb.Item>
    12.     <Breadcrumb.Item>An Application</Breadcrumb.Item>
    13.   </Breadcrumb>,
    14.   mountNode,
    15. );

    Breadcrumb 面包屑 - 图2

    react-router

    和 react-router@2 react-router@3 进行结合使用。

    1. import { Router, Route, Link, hashHistory } from 'react-router';
    2. import { Breadcrumb, Alert } from 'antd';
    4. const Apps = () => (
    5.   <ul className="app-list">
    6.     <li>
    7.       <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
    8.     </li>
    9.     <li>
    10.       <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
    11.     </li>
    12.   </ul>
    13. );
    15. const Home = ({ routes, params, children }) => (
    16.   <div className="demo">
    17.     <div className="demo-nav">
    18.       <Link to="/">Home</Link>
    19.       <Link to="/apps">Application List</Link>
    20.     </div>
    21.     {children || 'Home Page'}
    22.     <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
    23.     <Breadcrumb routes={routes} params={params} />
    24.   </div>
    25. );
    27. ReactDOM.render(
    28.   <Router history={hashHistory}>
    29.     <Route name="home" breadcrumbName="Home" path="/" component={Home}>
    30.       <Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
    31.         <Route name="app" breadcrumbName="Application:id" path=":id">
    32.           <Route name="detail" breadcrumbName="Detail" path="detail" />
    33.         </Route>
    34.       </Route>
    35.     </Route>
    36.   </Router>,
    37.   mountNode,
    38. );
    1. .demo {
    2.   margin: 16px;
    3. }
    4. .demo-nav {
    5.   height: 30px;
    6.   line-height: 30px;
    7.   margin-bottom: 16px;
    8.   background: #f8f8f8;
    9. }
    10. .demo-nav a {
    11.   line-height: 30px;
    12.   padding: 0 8px;
    13. }
    14. .app-list {
    15.   margin-top: 16px;
    16. }

    Breadcrumb 面包屑 - 图3

    分隔符

    使用 separator=">" 可以自定义分隔符。

    1. import { Breadcrumb } from 'antd';
    3. ReactDOM.render(
    4.   <Breadcrumb separator=">">
    5.     <Breadcrumb.Item>Home</Breadcrumb.Item>
    6.     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
    7.     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
    8.     <Breadcrumb.Item>An Application</Breadcrumb.Item>
    9.   </Breadcrumb>,
    10.   mountNode,
    11. );

    Breadcrumb 面包屑 - 图4

    带有图标的

    图标放在文字前面。

    1. import { Breadcrumb, Icon } from 'antd';
    3. ReactDOM.render(
    4.   <Breadcrumb>
    5.     <Breadcrumb.Item href="">
    6.       <Icon type="home" />
    7.     </Breadcrumb.Item>
    8.     <Breadcrumb.Item href="">
    9.       <Icon type="user" />
    10.       <span>Application List</span>
    11.     </Breadcrumb.Item>
    12.     <Breadcrumb.Item>Application</Breadcrumb.Item>
    13.   </Breadcrumb>,
    14.   mountNode,
    15. );

    Breadcrumb 面包屑 - 图5

    其它路由

    和 react-router@4，或其他路由进行结合使用。

    1. import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
    2. import { Breadcrumb, Alert } from 'antd';
    4. const Apps = () => (
    5.   <ul className="app-list">
    6.     <li>
    7.       <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
    8.     </li>
    9.     <li>
    10.       <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
    11.     </li>
    12.   </ul>
    13. );
    15. const breadcrumbNameMap = {
    16.   '/apps': 'Application List',
    17.   '/apps/1': 'Application1',
    18.   '/apps/2': 'Application2',
    19.   '/apps/1/detail': 'Detail',
    20.   '/apps/2/detail': 'Detail',
    21. };
    22. const Home = withRouter(props => {
    23.   const { location } = props;
    24.   const pathSnippets = location.pathname.split('/').filter(i => i);
    25.   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    26.     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    27.     return (
    28.       <Breadcrumb.Item key={url}>
    29.         <Link to={url}>{breadcrumbNameMap[url]}</Link>
    30.       </Breadcrumb.Item>
    31.     );
    32.   });
    33.   const breadcrumbItems = [
    34.     <Breadcrumb.Item key="home">
    35.       <Link to="/">Home</Link>
    36.     </Breadcrumb.Item>,
    37.   ].concat(extraBreadcrumbItems);
    38.   return (
    39.     <div className="demo">
    40.       <div className="demo-nav">
    41.         <Link to="/">Home</Link>
    42.         <Link to="/apps">Application List</Link>
    43.       </div>
    44.       <Switch>
    45.         <Route path="/apps" component={Apps} />
    46.         <Route render={() => <span>Home Page</span>} />
    47.       </Switch>
    48.       <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
    49.       <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    50.     </div>
    51.   );
    52. });
    54. ReactDOM.render(
    55.   <Router>
    56.     <Home />
    57.   </Router>,
    58.   mountNode,
    59. );
    1. .demo {
    2.   margin: 16px;
    3. }
    4. .demo-nav {
    5.   height: 30px;
    6.   line-height: 30px;
    7.   margin-bottom: 16px;
    8.   background: #f8f8f8;
    9. }
    10. .demo-nav a {
    11.   line-height: 30px;
    12.   padding: 0 8px;
    13. }
    14. .app-list {
    15.   margin-top: 16px;
    16. }

    Breadcrumb 面包屑 - 图6

    带下拉菜单的面包屑

    面包屑支持下拉菜单。

    1. import { Breadcrumb, Menu } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item>
    6.       <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
    7.         General
    8.       </a>
    9.     </Menu.Item>
    10.     <Menu.Item>
    11.       <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
    12.         Layout
    13.       </a>
    14.     </Menu.Item>
    15.     <Menu.Item>
    16.       <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
    17.         Navigation
    18.       </a>
    19.     </Menu.Item>
    20.   </Menu>
    21. );
    23. ReactDOM.render(
    24.   <div>
    25.     <Breadcrumb>
    26.       <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
    27.       <Breadcrumb.Item>
    28.         <a href="">Component</a>
    29.       </Breadcrumb.Item>
    30.       <Breadcrumb.Item overlay={menu}>
    31.         <a href="">General</a>
    32.       </Breadcrumb.Item>
    33.       <Breadcrumb.Item>Button</Breadcrumb.Item>
    34.     </Breadcrumb>
    35.   </div>,
    36.   mountNode,
    37. );

    API

    Breadcrumb

    参数说明类型默认值
    itemRender自定义链接函数，和 react-router 配置使用(route, params, routes, paths) => ReactNode-
    params路由的参数object-
    routesrouter 的路由栈信息routes[]-
    separator分隔符自定义string|ReactNode'/'

    Breadcrumb.Item

    参数参数类型默认值
    href链接的目的地string-
    separator自定义的分隔符string|ReactNode'/'
    overlay下来菜单的内容Menu | () => Menu-
    onClick单击事件(e:MouseEventHandler)=>void-

    routes

    1. interface Route {
    2.   path: string;
    3.   breadcrumbName: string;
    4.   children: Array<{
    5.     path: string;
    6.     breadcrumbName: string;
    7.   }>;
    8. }

    和 browserHistory 配合

    和 react-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。

    1. import { Link } from 'react-router';
    3. const routes = [
    4.   {
    5.     path: 'index',
    6.     breadcrumbName: 'home',
    7.   },
    8.   {
    9.     path: 'first',
    10.     breadcrumbName: 'first',
    11.     children: [
    12.       {
    13.         path: '/general',
    14.         breadcrumbName: 'General',
    15.       },
    16.       {
    17.         path: '/layout',
    18.         breadcrumbName: 'Layout',
    19.       },
    20.       {
    21.         path: '/navigation',
    22.         breadcrumbName: 'Navigation',
    23.       },
    24.     ],
    25.   },
    26.   {
    27.     path: 'second',
    28.     breadcrumbName: 'second',
    29.   },
    30. ];
    32. function itemRender(route, params, routes, paths) {
    33.   const last = routes.indexOf(route) === routes.length - 1;
    34.   return last ? (
    35.     <span>{route.breadcrumbName}</span>
    36.   ) : (
    37.     <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
    38.   );
    39. }
    41. return <Breadcrumb itemRender={itemRender} routes={routes} />;