react-bootstrap 面包屑与 react-router-dom

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>

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

对此有什么解决方案？不幸的是，react-bootstrap文档中没有提到这一点。（链接）

Answer 1

这很好用，它不会刷新整个页面，只刷新需要更改的内容

import { Breadcrumb } from "react-bootstrap";
import { Link } from "react-router-dom";

export const SiteMap = ({ hrefIn }) => {
  const items = [
    { href: "/dictionaries", name: "Dictionaries" },
    { href: "/antonyms", name: "Antonyms" },
  ];

  return (
    <Breadcrumb>
      {items.map((item) =>
        item.href === hrefIn ? (
          <Breadcrumb.Item active>{item.name}</Breadcrumb.Item>
        ) : (
          <Breadcrumb.Item linkProps={{ to: item.href }} linkAs={Link}>
            {item.name}
          </Breadcrumb.Item>
        )
      )}
    </Breadcrumb>
  );
};

Answer 2

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

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

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

Answer 3

如果我将<Breadcrumb.Item>其包装到<LinkContainer>. 现在，外部面包屑“我的应用程序”指向/applicationsURL，使用反应路由器将我的应用程序重定向到应用程序页面。

我用react-bootstrap v0.32.4 https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/components/breadcrumb/对此进行了测试

我<LinkContainer>从react-router-bootstrap包中获得：https://github.com/react-bootstrap/react-router-bootstrap

我之前在这里看到了“包装”，尽管我没有循环生成面包屑：https://github.com/react-bootstrap/react-router-bootstrap/issues/141#issue-122688732

import { LinkContainer } from 'react-router-bootstrap';

// and then in the render function

<Breadcrumb>
    <LinkContainer to="/applications" exact>
        <Breadcrumb.Item>My applications</Breadcrumb.Item>
    </LinkContainer>
    <Breadcrumb.Item active>My First Applicaton</Breadcrumb.Item>
</Breadcrumb>

Answer 4

我最终放弃了 react-boostrap 并“手工”完成：

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