没有什么技术难度,只是比官方的文档多了一丢丢的判断和改造;
用了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;
复制代码
若是直接返回高阶组件,会抛出异常说您返回的是函数而非React.child
,
解决就是我代码那样先缓存成组件,直接返回一个组件
有不对之处请留言,会及时修正,谢谢阅读..