@opendt/react-breadcrumbs-hoc

介绍

• 基于react-router-breadcrumbs-hoc封装的面包屑组件

使用

• 提供两个api，breadcrumbs，作为高阶组件引用，BreadcrumbsCom作为普通组件引用

• 在不传参数的情况下，默认会引用路由作为面包屑路径，且如果是单词首字母会自动大写。

    import React from 'react';
    import { breadcrumbs } from 'react-breadcrumbs-hoc';
    
    class Comp extends React.Component {
      render() {
        return (
          <div className="App">
            <div>
              <p>首页</p>
            </div>
          </div>
        );
      }
    }
  
    export default breadcrumbs()(Comp);
  

• react-breadcrumbs-hoc 接收两个参数

  • 第一参数是个对象数组
  • 第二参数是个boolean值，默认true，即会展示根目录对应的link连接。设为false即不展示。
  • 在需要调用的的组件中

    import React from 'react';
    import { breadcrumbs, BreadcrumbsCom } from 'react-breadcrumbs-hoc';
  
    const routes = [
      { path: '/', breadcrumbs: '首页' },
      { path: '/user', breadcrumbs: '用户' },
    ]
  
    class Comp extends React.Component {
      render() {
        return (
          <div className="App">
            <div>
              <p>首页</p>
            </div>
          </div>
        );
      }
    }
  
    export default breadcrumbs(routes, false)(Comp);
  

    import React from 'react';
    import { breadcrumbs } from 'react-breadcrumbs-hoc';
  
    const routes = [
      { path: '/', breadcrumbs: '首页' },
      { path: '/user', breadcrumbs: '用户' },
    ]
  
    class Comp extends React.Component {
      render() {
        return (
          <div className="App">
            <div>
              <p>首页</p>
              <BreadcrumbsCom routers={routes}, hasShowHomepage={true}/>
            </div>
          </div>
        );
      }
    }
  
    export default Comp;