Issue with breadcrumb clickability

[Deleted user]

Hello and thanks for the great library, looks good so far.

I have a bit of an issue trying to make breadcrumbs clickable. I am using reactstrap as the display component for breadcrumbs. So I have a breadcrumbs component:

  <Breadcrumbs
     item={BreadcrumbItem}
     container={Breadcrumb}
     finalProps={{ active: true }}
  />

Breadcrumb and BreadcrumbItem are component from reacstrap.

And on the pages, I render for example

   <BreadcrumbsItem
          to={`/someroute`}>
          Equipment
   </BreadcrumbsItem>

This renders fine, but clicking the breadcrumbs does nothing, which I assume is because they are not rendered as links then.

I'm sure I am just misunderstanding something and this is not a huge issue, but if you could help clear this issue out it would be great.

Thanks in advance.

EDIT:

So I got some progress done by making a wrapper component like this:

const WrapperBread = ({ ...props }) => {
  return (
    <BreadcrumbItem {...props} tag={NavLink} />
  );
}

Now the only issue seems to be that all of the breadcrumbs are marked as "active" all the time, which worked before I started using this wrapper component.

[oklas]

Hi,

Thank you that you come back and leave feedback about how you have to solve your problem with clickable, it will be useful for some one else. It looks good how you solved it.

About your second poblem with active items, try one of:

• specify different component for item and final item:

  <Breadcrumbs
     item={YourWrapperItem}
     finalItem={StrapBreadcrumbItem}
     container={Breadcrumb}
     finalProps={{ active: true }}
  />

• or try to play with tag and active props:

const WrapperBread = ({ active, ...props }) => {
  return (
    <BreadcrumbItem {...{
      active,
      tag: active ? NavLink : 'a',
      ...props
    }}/>
  );
}

I use here object with spread as props approach, you can read about it here: object with spread as react props