react-router-breadcrumbs-hoc的应用

最新推荐文章于 2025-04-12 21:10:46 发布

watts_j

最新推荐文章于 2025-04-12 21:10:46 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔&笔记 React umi 路由面包屑文章标签：路由面包屑 react

本文链接：https://blog.youkuaiyun.com/qq_33559093/article/details/92191004

随笔&笔记同时被 3 个专栏收录

26 篇文章

订阅专栏

React

12 篇文章

订阅专栏

umi

4 篇文章

订阅专栏

本文介绍在Umi框架中如何使用面包屑插件进行导航，通过代码示例展示了如何配置和自定义面包屑组件，适用于各种页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从umi文档中看到的这个推荐使用面包屑插件，体验不错，记录一下使用。

直接上代码，可以作为一个组件加在任何地方，具体使用看文档---点这里

import style from './bc.scss'
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import Link from 'umi/link';

const DynamicUserBreadcrumb = ({ match, location }) => (
  <span>{location.query.id ? '用户信息修改' : '新增用户'}</span>
);
//  可拓展性而言，面包屑和权限管理全局对象，需要后端返回， 当国际化的情况下语言前缀要加上。
const routes = [
  { path: '/zh_CN/userManagement', breadcrumb: '用户管理' },
  { path: '/zh_CN/userManagement/Detail', breadcrumb: DynamicUserBreadcrumb },
];
const excludePaths = ['/', '/zh_CN'];
const Breadcrumbs = ({ breadcrumbs }) => (
  <div className={style.Breadcrumb}>
    {breadcrumbs.map((bc, index) => (
      <span key={bc.match.url}>
        <Link
          to={{
            pathname: bc.match.url,
            state: bc.match.params ? bc.match.params : {},
            query: bc.location.query ? bc.location.query : {},
          }}
        >
          {bc.breadcrumb}
        </Link>
        {index < breadcrumbs.length - 1 && <i>&nbsp;/&nbsp;</i>}
      </span>
    ))}
  </div>
);

export default withBreadcrumbs(routes, {excludePaths})(Breadcrumbs);