Advanced usage with custom items about react-breadcrumbs-dynamic

[oklas]

Hi

It need to mention that the length of url (filed to) is used to sort crumbs when breadcrumbs is generated.

So you have several ways:

• correct routes to match object relation:

<Route path='/project/:projectId' component={Project} />
<Route path='/project/:projectId/task/:taskId' component={Task} />
...
<BreadcrumbsItem to=`/project/123` children={projectName} />
<BreadcrumbsItem to=`/project/123/task/123` children={taskName} />

• use special filed for sorting and specify compare function at breadcrumbs instance:

<Breadcrumbs compare={(a,b)=>a.weight-b.weight} />
...
<BreadcrumbsItem weight=0 to=`/project/123` children={projectName} />
<BreadcrumbsItem weight=1 to=`/task/123` children={taskName} />

• add some unsignificant text to increate length of url to correct sorting (see remark about sorting above):

<BreadcrumbsItem to=`/project/123` children={projectName} />
<BreadcrumbsItem to=`/task/123#something` children={taskName} />

[anteburazer]

Thank you @oklas. Multiple BreadcrumbsItem with weight fixed the problem.