When returning null an empty breadcrumb is returned instead

[InfiAest]

Hi there 👋

I have stumbled across a problem where if you try to return null to the breadcrumb it renders an empty crumb instead of nothing. Please see this codesandbox for an extremely basic example of the problem https://codesandbox.io/s/react-router-breadcrumbs-bug-infiaest-37wkbt?file=/index.tsx

As you can see in the codesandbox above I would like the breadcrumbs to display as Home / All Events when on the page with the pathname "/events" and then as Home / Event Name when on the child page with the pathname "/events/1".

I have used the function location.pathname === "/events" ? <span>All Events</span> : null which should return the desired breadcrumb. However returning null like this results in the breadcrumb containing an empty crumb like this: Home / / Event Name

Any help/fixes would be greatly appreciated! 🤔

[icd2k3]

ok, so the problem here is that when the breadcrumbs are mapped over it sees breadcrumb as a function (not null) because it is dynamically rendered...

As an enhancement to this repo, it's probably possible to check if the breadcrumb component is null here in the src and return a flat null instead of the whole component. I'll have to look into this a bit more for

In the meantime, the only workaround I can think of would be to check the location object in the breadcrumb.map and conditionally render it - or use a unique path like events/all vs events/:id to make use of priority ordering. It also might be worth trying the official RR breadcrumb docs to see if it might provide more flexibility.