title: react-bootstrap breadcrumb with react-router-dom
body: <p>I'm trying to use <code>react-bootstrap</code> breadcrumb as below.</p>
  
  <pre><code>&lt;Breadcrumb&gt;
      &lt;Breadcrumb.Item href="#"&gt;Home&lt;/Breadcrumb.Item&gt;
      &lt;Breadcrumb.Item&gt;&lt;Link to={"/products"}&gt;Products&lt;/Link&gt;&lt;/Breadcrumb.Item&gt;
      &lt;Breadcrumb.Item active&gt;{productName}&lt;/Breadcrumb.Item&gt;
  &lt;/Breadcrumb&gt;
  </code></pre>
  
  <p>As you can expect, <code>products</code> Link will render anchor tag inside another anchor tag, which is invalid markup. But <code>Home</code> creates a simple anchor tag instead of react's <code>Link</code> making the page to reload, making it unusable.</p>
  
  <p>What's the solution for this? Unfortunately, there's no mention of this in <code>react-bootstrap</code> doc. (<a href="https://react-bootstrap.github.io/components/breadcrumb/" rel="noreferrer">link</a>)</p>