@opendt/react-breadcrumbs-hoc v1.0.1

介绍

• 基于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;