Advanced usage with custom items

[anteburazer]

Hi

I have the Project page with route/project/:projectId and Task page with route /task/:taskId. Project page contains the list of tasks and clicking on it redirects the user to the Task page.
Those two pages have independent routes, defined on the top level. When displaying Task page I want to have a breadcrumb project_name -> task_name which requires some custom logic because the library will not display the whole chain since Task route is not nested inside the Project route.

How I can achieve that?

[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.