# antd-breadcrumb-wrap

Latest version **1.1.0** (published 2018-03-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install antd-breadcrumb-wrap
pnpm add antd-breadcrumb-wrap
yarn add antd-breadcrumb-wrap
bun add antd-breadcrumb-wrap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-03-21 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | aflyingpig |
| Maintainers | aflyingpig |
| Keywords | antd, component, breadcrumb |

## Links

- npm: https://www.npmjs.com/package/antd-breadcrumb-wrap
- Repository: https://github.com/TongDaDa/antd-breadcrumb-wrap
- Homepage: https://github.com/TongDaDa/antd-breadcrumb-wrap#readme
- Issues: https://github.com/TongDaDa/antd-breadcrumb-wrap/issues
- npm.io page: https://npm.io/package/antd-breadcrumb-wrap

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [antd-breadcrumb-wrap](https://npm.io/package/antd-breadcrumb-wrap.md) ^1.0.2

## Recent versions

- 1.1.0 (latest) — 2018-03-21
- 1.0.2 — 2018-03-20
- 1.0.1 — 2018-03-20
- 1.0.0 — 2018-03-20

## README

# antd-breadcrumb-wrap


## feature
🚀🚀 It solves the binding relationship with antd breadcrumb navigation,
you need to provide the route data, to automatically update your bread
crumbs navigation

## use

```javascript
import BreadCrumbWrap from 'antd-breadcrumb-wrap'

..........some code

// routes ⬇️
const routes = [
      {
            name: '事项管理', component: Matter, path:"/matter", isExact: true,
            children: [
                {name: '查看', component: props => <MatterLookAndEdit {...props} type="look" />, path:"look/:id"},
                {name: '编辑', component: props => <MatterLookAndEdit {...props} type="edit" />, path:"edit/:id"},
            ]
        },
]

const MatterLookAndEdit = ({match})=>{

  const defaultItemRender = (route, params, routes, paths) {
           const last = routes.indexOf(route) === routes.length - 1;
           return last ? <span>{route.breadcrumbName}</span> : <Link to={route.path}>{route.breadcrumbName}</Link>;
  }

  return (
     <BreadCrumbWrap
         routes={routes}
         match={match}
         itemRneder={defaultItemRender}
     />
  )
}

```

## API

| 参数         | 说明                                      | 类型         | 默认值 |
|-------------|------------------------------------------|-------------|-------|
| routes        | routes data | Array | refer below @routeData |
| match      | this.props.match | Object  | - |
| itemRender    | render hook | Function  | -    |
| defaultBreadCrumb | defaultBreadCrumb  | Object,Array  | -    |

if you want to use it, limit your routes is above example, that is to say , your route data should contain children Array,
so with it form corresponding relations between

@routeData rule below :
This, of course, is a hierarchy, but it needs routes format is  one-dimensional the array,
so that meanings that if you have pursuing, may have to change it.

```javascript

const routes = [
        {
            name: '事项管理', component: Matter, path:"/matter", isExact: true,
            children: [
                {name: '查看', component: props => <MatterLookAndEdit {...props} type="look" />, path:"look/:id"},
                {name: '编辑', component: props => <MatterLookAndEdit {...props} type="edit" />, path:"edit/:id"},
            ]
        },
]

// from routes transform to ⬇️ ⬇️

routes = [
   {name: '事项管理', component: Matter, path:"/matter", isExact: true},
   {name: '编辑', component: props => <MatterLookAndEdit {...props} type="edit" />, path:"/matter/edit/:id"},
   {name: '查看', component: props => <MatterLookAndEdit {...props} type="look" />, path:"/matter/look/:id"},
]

```

`it just unfold it's children to one-dimensional the array. if you use react-router-dom may be you can only do so.`

@match

it's react-router props.match object, it contain two property below:

match = {path:'/matter/edit/:id/look',url:/matter/edit/2/look}

## install

```
npm install antd-breadcrumb-wrap -save
```

## pull request
i'm very hopes someone give provide opinion, pull request in the repository.

---
_Source: https://npm.io/package/antd-breadcrumb-wrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._