Render Breadcrumb as NavLink

[MicahBCode]

Hey, I'm using fluentUI in a react router project.

I do have a Breadcrumbs Component like so:

<Breadcrumb>
  {matches.map(match => (
    <BreadcrumbItem key={match.id}>
      <BreadcrumbButton href={match.pathname}>{match.handle as string}</BreadcrumbButton>
    </BreadcrumbItem>
  ))}
</Breadcrumb>

As this renders as an <a>-Tag this does not use client side navigation but reloads the full document instead. Is there a way to use react routers NavLink component instead?

[ValentinaKozlova]

To integrate FluentUI's Breadcrumb component with React Router's NavLink for client-side navigation, you can use the as prop provided by FluentUI components. This allows you to render a custom component, such as NavLink, instead of the default <a> tag.
Here’s how you can modify your Breadcrumb component to use NavLink:

import { Breadcrumb, BreadcrumbItem, BreadcrumbButton } from '@fluentui/react-components';
import { NavLink } from 'react-router-dom';

<Breadcrumb>
  {matches.map(match => (
    <BreadcrumbItem key={match.id}><BreadcrumbButton as={NavLink} to={match.pathname}>
        {match.handle as string}
      </BreadcrumbButton></BreadcrumbItem>
  ))}
</Breadcrumb>

[ValentinaKozlova]

I see that BreadcrumbButton doesn't not support custom component in as prop.
You might want to try something like this:

<BreadcrumbItem>
  <NavLink to={path}>Messages</NavLink>
</BreadcrumbItem>

Let me know if it helps. If no, you might want to create a feature request for Breadcrumb component.