前言
没有什么技术难度,只是比官方的文档多了一丢丢的判断和改造;
用了react-router-breadcrumbs-hoc,约定式和配置式路由路由皆可用,
只要传入的符合规格的数据格式即可
基础环境
React 16.4/UmiJS 2.2/Antd 3.x/ react-router-breadcrumbs-hoc 2.x: API简洁易懂
效果图
- 非
antd风格
antd风格
源码及实现
暴露的props:
data: 面包屑的映射关系,数组(react-router-breadcrumbs-hoc要求的那种)
比如 : const routes = [{ path: '/', breadcrumb: '首页' }];
若是不传递的情况下,高阶组件(react-router-breadcrumbs-hoc)会自动获取路径名字为面包屑的名字
Breakcrumbs
import Link from 'umi/link'; import withBreadcrumbs from 'react-router-breadcrumbs-hoc'; import { Breadcrumb, Badge, Icon } from 'antd'; // 更多配置请移步 https://github.com/icd2k3/react-router-breadcrumbs-hoc const routes = [{ path: '/', breadcrumb: '首页' }]; const Breadcrumbs = ({ data }) => { if (data && Array.isArray(data)) { const AntdBreadcrumb = withBreadcrumbs(data)(({ breadcrumbs }) => { return ( <Breadcrumb separator={<Icon type="double-right" />} classNames="spread"> {breadcrumbs.map((breadcrumb, index) => ( <Breadcrumb.Item key={breadcrumb.key}> {breadcrumbs.length - 1 === index ? ( <Badge status="processing" text={breadcrumb} /> ) : ( <Link to={{ pathname: breadcrumb.props.match.url, state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {}, query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {}, }} > {breadcrumb} </Link> )} </Breadcrumb.Item> ))} </Breadcrumb> ); }); return <AntdBreadcrumb />; } const DefaultBreadcrumb = withBreadcrumbs(routes)(({ breadcrumbs }) => ( <div> {breadcrumbs.map((breadcrumb, index) => ( <span key={breadcrumb.key}> <Link to={{ pathname: breadcrumb.props.match.url, state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {}, query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {}, }} > {breadcrumb} </Link> {index < breadcrumbs.length - 1 && <i> / </i>} </span> ))} </div> )); return <DefaultBreadcrumb />; }; export default Breadcrumbs;
