breadcrumb data

[vErsteniuk]

Good evening, I have an issue with accessing breadcrumb data in my routes. Is it possible to go one step back according to its data and how can we get the data ? Thank you.

const myComponent = (props) => {
     const breadcrumbProps = props.something*
     const prevPath = breadcrumbProps.map(...)* || breadcrumbProps.prevPath*

     return (
          <Fragment>
                  <BreadcrumbsItem to={ somePathname }>Current Breadcrumb</BreadcrumbsItem>

                  <button onClick={() => goToPrevPath(prevPath)}>
                       Back
                  </button>
          </Fragment>
    )
}

[oklas]

You can access breadcrumbs data with code like below. The Button component renders some paragraphs to show breadcrumbs data, replace it with appropriate code which actually render the button.

import {breadcrumbsThroughArea, withBreadcrumbsContainer} from 'react-breadcrumbs-dynamic'

class Button = ({[breadcrumbsThroughArea]: breadcrumbsData}) => (
  <div>
    {Object.keys(breadcrumbsData).map( to =>
      <p>to: {to} -> props: {JSON.stringify(breadcrumbsData[to])}</p>
    )}
  </div>
)

export withBreadcrumbsContainer(Button)

! Do not use withBreadcrumbsContainer hoc for myComponent or any other component which render BreadcrumbsItem.

[vErsteniuk]

@oklas
Thank you for quick answer, I will try it today and leave a feedback if it helped ) Hope it will ) The library is great.

[oklas]

You are welcome, more details about how it workes you can read in react-through documentation.
And welcome to github. You can click [:star: Star] button on the top of page on repos which you like, to make it more visible for other, you also can see your list of starts

[vErsteniuk]

The breadcrumbsThroughArea has 3 keys-functions that have "key" argument. I tried doing breadcrumbsThroughArea.remove(), breadcrumbsThroughArea.remove(url) and breadcrumbsThroughArea.remove(breadcrumbName), nothing helps. . . Any Ideas ? What should I pass to these functions ? I did not find the answer in documentation.

[oklas]

Oh, I confused, please use withBreadcrumbsContainer instead of withBreadcrumbs, let me know if any issue or question

[vErsteniuk]

Oh, I confused, please use withBreadcrumbsContainer instead of withBreadcrumbs, let me know if any issue or question

That definitely helped me! The result now is something like:

breadcrumbsData: 
/subscribers/contacts: {to: "/subscribers/contacts", children: "Contact Lists"}
/subscribers/contacts/132828: {to: "/subscribers/contacts/132828", children: "Contact view"}

Thank your for your answers!

[oklas]

Thank you for feedback. Take a look at react-through - the power of such things

You are welcome