Breadcrumbs appear in the wrong order for only ONE page

[tszekely-spotcap]

Hi, first of all thank you for your hard work with implementing this module.

I have this weird issue where on ONE page the breadcrumb order is messed up, while the rest of the pages are perfectly fine.

Here's some code that might help identify the issue.
The breadcrumbs are declared in the parent component along with 2 base items:

          <BreadcrumbsItem to="/">Home</BreadcrumbsItem>
          <BreadcrumbsItem to="/dashboard">
            <i className="material-icons">chevron_right</i>User
          </BreadcrumbsItem>
          <Breadcrumb />
          <div className="main">
            <Switch>
              <Route path="/dashboard" component={Dashboard} />
              <Route path="/risk-assessment" component={RiskAssessment} />
              <Route path="/bank-accounts" component={BankAccount} />
              <Route path="/scoring-decision" component={ScoringDecision} />
              <Route path="/financial-light" component={FinancialLight} />
              <Route path="/cle" component={CreditLineEstimations} />
            </Switch>
          </div>

All the pages have the BreadcrumbsItem on top of the page as in the examples and they work fine except the CreditLineEstimations page which shows them as:
Home > Credit line estimations > User
instead of
Home > User > Credit line estimations

the page render jsx starts as:

<div>
        <BreadcrumbsItem to="/cle">
          <i className="material-icons">chevron_right</i>Credit line estimations
        </BreadcrumbsItem>
...

PS: don't mind the separator added in the BreadcrumbsItem, it's wrong and it'll be fixed

[oklas]

Hi! Thank you for feedback. Any feedback and stars is very significant to know that my creations is on demand. Also followers can receive notifications about new features.

Breadcrumbs is displaying a hierarchy of the current page in relation to the website's structure. This means breadcrumbs is a branch of tree. This mean leaf may not sit on two branch or branch can not contain another non parental branch. This also may confuse user who navigated via breadcrumbs.

In your example /cle does not lie on /dashboard it lie on / (Home). So possible solutions:

• change route of CreditLineEstimations from/cle to /dashboard/cle
• move <BreadcrumbsItem to='/dashboard'/> to <Dashboard/> component

Consider more opinions:

• create additional navigation elements for frequently used pages like dashboard
• create menu like drop-down elements for breadcrumb item - (<Breadcrumbs item={Menu}/>)
• consider to use react-through if you want to create some as breadcrumbs but some different.

[oklas]

I close the issue. I hope you solved the problem. Feel free to write or reopen or create new if any.

[oklas]

Orderig of breadcrumbs is customizable now due to #19. Maybe you'll find it useful for your case.