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)
<Breadcrumb.Item>
into a Link?