[Feature Request]: Support Routing in BreadcrumbGroup

[elorakitty]

Description

The goal of this change is to provide compatibility between BreadcrumbGroup and routers.

Currently BreadcrumbGroupProps.Item accepts only a string href, and the BreadcrumbGroup component accepts a list of these items as input.
When using React Router (or other react router library), resolved href values are available through hooks or components (like useHref and Link for React Router).
While BreadcrumbGroupProps exposes onFollow and onClick events that can be used to correctly navigate with a router, this will not extend to the href of the generated <a> tag, and therefore will not apply to hovering over links, copying links, or opening links in a new tab/window.
Because the items value is an array, there isn't a way to use hooks or components to generate the correct set of href values.
Instead, the BreadcrumbGroup component should allow items to be defined themselves as components.

---

Potential solutions

Expose the BreadcrumbItem component.
Modify the items input type of BreadcrumbGroup to be the union of extends BreadcrumbGroupProps.Item and extends BreadcrumbItem.

This will allow users to create their own custom component for BreadcrumbItem, and therefore have the ability to use React Router hooks to render the exact href value.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[just-boris]

Hello!

Integration with React router is expected this way

const navigate = useNavigate();
<BreadcrumbGroup onFollow={event => navigate(event.detail.href)}>

Longer explanation of reasons why we do not allow can be found in another issue: #126 (comment)

this will not extend to the href of the generated <a> tag

Can you elaborate on this?

This code <BreadcrumbGroup items={[{ text: 'Item', href: '/some-route' }, ...]}> will render you an <a> tag as expected. Except the last item in the list, which is not interactive, and this is also by design

[elorakitty]

This simple app demonstrates the issue.

function Home() {
  const navigate = useNavigate();
  return <BreadcrumbGroup onFollow={e => navigate(e.detail.href)} items={[
    { text: 'Other Page', href: 'other' },
    { text: 'Home', href: '/' },
  ]} />
}

export default function App() {
  return (
    <RouterProvider router={createBrowserRouter(
      createRoutesFromElements(
        <>
          <Route path="/" element={<Home />} />
          <Route path="/other" element={<p>Page 2</p>} />
        </>
      ), {
      basename: "/some-basename"
    }
    )} />
  )

Navigating to http://localhost:3000/some-basename

1. if you click on the "Other Page" link, it will navigate you to http://localhost:3000/some-basename/toher
2. If you hover on the "Other Page" link, it will display http://localhost:3000/other
3. If you right click and Copy Link, or middle click, or control click the link, it will also use http://localhost:3000/other

Ideally there would be some mechanism to have all of them include the basename.
Right now the only way I can achieve that is by manually constructing the correct URL including the basename myself, which defeats the purpose of using React Router's basename in the first place.

[just-boris]

If you use basename you need to generate hrefs respectively, using the useHref hook (or its equivalent in older React-router versions)