Auto generate breadcrumb for React Router 4.xx
Use yarn
$ yarn add auto-breadcrumb
Use npm
$ npm install auto-breadcrumb --save
import breadcrumbConfig from 'auto-breadcrumb';
const Breadcrumbs = breadcrumbConfig(config);
render(<Breadcrumbs pathname={location.pathname} />, MOUNT_DOM);- The
config
| keyName | type | default | description |
|---|---|---|---|
| staticRoutesMap | Object | {'/':'Home'} |
No params routes map to breadcrumb name |
| dynamicRoutesMap | Object | {} |
With params routes map to breadcrumb name |
| homePath | String | / |
The index path |
| Breadcrumb | ReactComponent | ul |
The Breadcrumb container |
| BreadcrumbItem | ReactComponent | li |
The Breadcrumb Item |
| containerProps | Object | {} |
The container props |
| itemProps | Object | {} |
The item props |
itemRender |
|||
| notFound | string | 404 NotFound |
The custom notFound name |
| itemRender | (name, path?) => ReactNode | - | You can custom everything for item display, if the param path is not given, you should render a text node(not clickable) |
| isDisplayInHome | boolean | false | Is the Breadcrumb displayed on the home page |
- The
BreadcrumbsComponent props
| propsName | type | isRequire | default | description |
|---|---|---|---|---|
| pathname | String | Y | - | The full location path |
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent