ant-design/components/breadcrumb/index.zh-CN.md
2016-12-04 15:17:17 +08:00

1.5 KiB

category subtitle type title
Components 面包屑 Navigation Breadcrumb

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

何时使用

  • 当系统拥有超过两级以上的层级结构时;
  • 当需要告知用户『你在哪里』时;
  • 当需要向上导航的功能时。

API

参数 说明 类型 可选值 默认值
routes router 的路由栈信息 Array -
params 路由的参数 Object -
separator 分隔符自定义 String or Element '/'
itemRender 自定义链接函数,和 react-router 配置使用 (route, params, routes, paths) => React.ReactNode -

2.0 之后,linkRendernameRender 被移除,请使用 itemRender 来代替。

和 browserHistory 配合

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

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} />;