reactjs - 带有react-router-dom的react-bootstrap面包屑

Question

我正在尝试使用 react-bootstrap 面包屑，如下所示。

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

正如您所料，products Link 将在另一个 anchor 标记内呈现 anchor 标记，这是无效标记。但是 Home 创建了一个简单的 anchor 标记，而不是 React 的 Link ，导致页面重新加载，使其无法使用。

这个问题有什么解决办法吗？不幸的是，react-bootstrap 文档中没有提到这一点。 (link)

Answer 1

我可能会使用react-router-bootstrap，但如果您不想将其包含为依赖项，您可以使用现在可用的 linkAs and linkProps Breadcrumb params 手动应用链接。例如:

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

这种方法很有趣，尤其是当您仅将“as”属性与其他组件(如 Button 或 NavLink)一起使用时。