[SOLVED] react-bootstrap breadcrumb with react-router-dom

react-bootstrap breadcrumb with react-router-dom

I'm trying to use react-bootstrap breadcrumb as below.

<Breadcrumb>
    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
    <Breadcrumb.Item><Link to={"/products"}>Products</Link></Breadcrumb.Item>
    <Breadcrumb.Item active>{productName}</Breadcrumb.Item>
</Breadcrumb>

As you can expect, products Link will render anchor tag inside another anchor tag, which is invalid markup. But Home creates a simple anchor tag instead of react's Link making the page to reload, making it unusable.

What's the solution for this? Unfortunately, there's no mention of this in react-bootstrap doc. (link)

Solution

I ended up dropping react-boostrap and doing it 'by hand':

const Breadcrumbs = ({ breadcrumbs }) => (
  <ol className="breadcrumb">
    {breadcrumbs.map((breadcrumb, index) => (
      <li key={breadcrumb.key}>
        <NavLink to={breadcrumb.props.match.url}>
          {breadcrumb}
        </NavLink>
      </li>
    ))}
  </ol>
);