react-bootstrap breadcrumb with react-router-dom

Question

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)

Answer 1

I would probably use react-router-bootstrap, but if you don't want to include it as a dependency, you can apply the link by hand using the now available linkAs and linkProps Breadcrumb params. For instance:

<Breadcrumb.Item linkAs={Link} linkProps={{ to: "/path" }}>
  My item
</Breadcrumb.Item>

This approach is interesting especially if you are using just the "as" attribute with other components like Button or NavLink.