10

I'm trying to use react-bootstrap breadcrumb as below.

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

As you can expect, products Link will render anchor tag inside another anchor tag, which is invalid markup. But Home creates a simple anchor tag instead of react's Link making the page to reload, making it unusable.

What's the solution for this? Unfortunately, there's no mention of this in react-bootstrap doc. (link)

2

6 Answers 6

22

I would probably use react-router-bootstrap, but if you don't want to include it as a dependency, you can apply the link by hand using the now available linkAs and linkProps Breadcrumb params. For instance:

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

This approach is interesting especially if you are using just the "as" attribute with other components like Button or NavLink.

13

This nicely works and it does not refresh the whole page, only what's needed to change

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

7

I ended up dropping react-boostrap and doing it 'by hand':

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

It works for me if I wrap <Breadcrumb.Item> into the <LinkContainer>. Now outer Breadcrumb "My applications" which points to /applications URL redirects my app with react-router to the applications page.

I tested this with react-bootstrap v0.32.4 https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/components/breadcrumb/

I got <LinkContainer> from react-router-bootstrap package: https://github.com/react-bootstrap/react-router-bootstrap

I saw "the wrapping" here before, though I don't generate breadcrumb in a loop: 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>
1

Here I have passed onClick to Breadcrumb.Item to handle navigation with the help of

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

Here is the sample:

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

Bootstrap.Item internally uses SafeAnchor which allows you to not use a link if you don't want to.

Using the as prop you can modify what tag is used (a by default). For example you can pass:

<Bootstrap.Item as="div" />

And it will use a div tag for presenting the item.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.