代码之家 › 专栏 › 技术社区 › Prajwal

react引导面包屑与react路由器dom

react-bootstrap reactjs

Prajwal · 技术社区 · 7 年前

我想用 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 链接将在另一个锚标记内呈现锚标记,这是无效的标记。但是 Home 创建一个简单的锚定标记,而不是react的 Link 使页面重新加载,使其无法使用。

有什么解决办法?不幸的是,在 反应引导 文件编号:。( link )

6 回复 | 直到 7 年前

Michel Sabchuk 4 年前

我可能会使用react路由器引导,但如果您不想将其作为依赖项,可以使用现在可用的 linkAs and linkProps Breadcrumb params . 例如:

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

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

Jens Kirk Roybal 6 年前

最后我扔掉了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>
);

Edgar Manukyan 4 年前

这很好地工作,它不会刷新整个页面,只刷新需要更改的内容

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

Jirik 5 年前

如果我包起来 <Breadcrumb.Item> 进入 <LinkContainer> . 现在外部面包屑“我的应用程序”指向 /applications URL使用react router将我的应用重定向到应用程序页面。

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

我得到了 <LinkContainer> 从react路由器引导包: 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>

Tanmay Verma 5 年前

我已经通过了 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);

-1

lorefnon 5 年前

独自创立项目内部使用 SafeAnchor 如果您不想使用链接,则可以不使用该链接。

使用 as 属性您可以修改使用的标记( a 默认情况下)。例如,您可以传递:

<Bootstrap.Item as="div" />

它将使用一个div标记来表示项目。