Question

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

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

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

这是什么解决方案？不幸的是，在react-bootstrap doc中没有提到这一点。（link）

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-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>
);

Answer 3

在这里，我已经将onClick传递给Breadcrumb.Item以便在的帮助下进行导航

import { withRouter } from "react-router-dom";

以下是示例：

const RenderBreadcrumb = ({ breadcrumbInfo, history }) => {
    const handleRedirect = (url) => {
        history.push(url);
    }

    return (
        <Breadcrumb>
            { map(breadcrumbInfo, (item) => {
                if(item.isActive) {
                    return (<Breadcrumb.Item active>{item.text}</Breadcrumb.Item>);
                }
                return (<Breadcrumb.Item onClick={() => { handleRedirect(item.link); }}>{item.text}</Breadcrumb.Item>);
            })}
        </Breadcrumb>
    )
}

export default withRouter(RenderBreadcrumb);

Answer 4

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

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

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

Answer 5

Bootstrap.Item在内部使用SafeAnchor，如果您不愿意，可以不使用链接。

使用componentClass道具，您可以修改使用的标记（默认情况下为a）。例如，您可以传递：

<Bootstrap.Item componentClass="div" />

它将使用div标签来展示该项目。

Answer 6

如果我将<Breadcrumb.Item>包装到<LinkContainer>中，它对我有用。现在，指向/applications URL的外部面包屑“我的应用程序”将我的应用程序通过react-router重定向到应用程序页面。

我使用react-bootstrap v0.32.4 https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/components/breadcrumb/

对此进行了测试

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

我以前在这里看到过“包装纸”，尽管我没有在循环中生成面包屑：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>

react-bootstrap breadcrumb with react-router-dom

6 个答案: