@methodexists/dva-ant-breadcrumbs NPM

dva-ant-breadcrumbs

Antd’s Breadcrumb component connected to dva router.

npm i @methodexists/dva-ant-breadcrumbs

Put <Breadcrumbs /> component inside render method of your route component:

const UsersPage = ({ routes, params }) => (
  <div>
    <Breadcrumbs routes={routes} params={params} />
  </div>
);

The component will analyze route’s path and will try to guess the best title for each bread crumb.

URL	Path	Guessed titles
`/userProfile`	`userProfile`	"User Profile"
`/users`	`users`	"Users"
`/users/ilya`	`users/:username`	"Users" / "Ilya"
`/users/9jerb`	`users/:id`	"Users" / "9jerb" (here you’ll need customization)

Add title prop to a route and it will be used for bread crumb’s title.

<Route path="userProfile" title="My Profile" ... />

Add getTitle prop to calculate bread crumb’s title basing on params from the router and state.

<Route path=":id" getTitle={(params, state) => state.users[params.id].name} />

If getTitle() prop is undefined or returns undefined then use title.
If title is undefined then guess title from path.

Prop	Type	Description
`*` `path`	`string`	Route’s path. If `undefined`, the route will be skipped. Could be param name like `:username`
`getTitle`	`(params, state) => string`	Function to generate route’s title basing on `params` prop from router and current `state`
`title`	`string`	Text to use for route’s title