使用import { Breadcrumb } from "antd"; |
// >=5.3.0 可用，推荐的写法 ✅return <Breadcrumb items={[{ title: 'sample' }]} />;// <5.3.0 可用，>=5.3.0 时不推荐 🙅🏻♀️return (<Breadcrumb><Breadcrumb.Item>sample</Breadcrumb.Item></Breadcrumb>);// 或return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
| params | 路由的参数 | object | - | |
| items | 路由栈信息 | items[] | - | 5.3.0 |
| separator | 分隔符自定义 | ReactNode | / |
type ItemType = Omit<RouteItemType, 'title' | 'path'> | SeparatorType
const item = {type: 'separator', // Must haveseparator: '/',};
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| type | 标记为分隔符 | separator | 5.3.0 | |
| separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
和 react-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。
import { Link } from 'react-router';const items = [{path: '/index',title: 'home',},{path: '/first',title: 'first',children: [{path: '/general',title: 'General',},{path: '/layout',title: 'Layout',},{path: '/navigation',title: 'Navigation',},],},{path: '/second',title: 'second',},];function itemRender(currentRoute, params, items, paths) {const isLast = currentRoute?.path === items[items.length - 1]?.path;return isLast ? (<span>{currentRoute.title}</span>) : (<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>);}return <Breadcrumb itemRender={itemRender} items={items} />;
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| iconFontSize | 图标大小 | number | 14 |
| itemColor | 面包屑项文字颜色 | string | rgba(0,0,0,0.45) |
| lastItemColor | 最后一项文字颜色 | string | rgba(0,0,0,0.88) |
| linkColor | 链接文字颜色 | string | rgba(0,0,0,0.45) |
| linkHoverColor | 链接文字悬浮颜色 | string | rgba(0,0,0,0.88) |
| separatorColor | 分隔符颜色 | string | rgba(0,0,0,0.45) |
| separatorMargin | 分隔符外间距 | number | 8 |