How to use Breadcrumbs with react-router? Is there an example?

[tbelmega]

Hey friends,
I have a single page application with 1 global AppLayout, where the content changes based on the route:

<BrowserRouter>
      <AppLayout
        content={<MainContentRoutes>}
      />
</BrowserRouter>

Now I need not only the content part to change based on the active route, but also the breadcrumbs. The only way I found to make it work has 2 issues:
(1) a lot of duplicated lines
(2) a click on the breadcrumb causes a hard page reload, it is not handled by the client-side routing but rather like an external link. Adding onFollow/onClick with event.preventDefault() to the BreadcrumbGroups didn't help.

<BrowserRouter>
      <AppLayout
       breadcrumbs={<BreadcrumbRoutes/>}
        content={<MainContentRoutes/>}
      />
</BrowserRouter>

export const BreadCrumbRoutes = () =>
  <Routes>
    <Route path='/' element={<BreadcrumbGroup
      onFollow={(e) => e.preventDefault()} // trying to prevent the page reload, doesn't work
      onClick={(e) => e.preventDefault()} // trying to prevent the page reload, doesn't work
      items={[
        {text: 'Home', href: '/'},
      ]}/>
    }/>
    <Route path='/projects' element={<BreadcrumbGroup
      items={[
        {text: 'Home', href: '/'}, 
        {text: 'Projects', href: '/projects'},
      ]}
    />
    }/>
    <Route path='/projects/:projectId/onboarding' element={<BreadcrumbGroup
      items={[
        {text: 'Home', href: '/'}, 
        {text: 'Projects', href: '/projects'}, 
        {text: 'Project Details', href: '/projects/:projectId'}, 
        {text: 'Onboarding', href: '/pojects/:projectId/onboarding'},
      ]}/>}/>
    <Route path='/projects/:projectId' element={<BreadcrumbGroup items={[
      {text: 'Home', href: '/'}, 
      {text: 'Projects', href: '/projects'}, 
      {text: 'Project Details', href: '/projects/:projectId'},
    ]}
    />}/>
    <Route path='/catalog' element={<BreadcrumbGroup items={[
      {text: 'Home', href: '/'},
      {text: 'Dependency Catalog', href: '/catalog'},
    ]}
    />}/>
  </Routes>

It seems to me there's an idea about BreadcrumbGroups component that I'm missing, and the documentation/examples show to simple of a case to answer how it's supposed to be used in a real application.

Can anybody show me how it's done?

[just-boris]

Hello!

You can use onFollow handler to call navigate programmaticaly.

Here we have an example for side navigation: #126 (comment) but it is the same for BreadcrumbGroup as well

[tbelmega]

Thanks for the response! According to my question I tried that and it didn't work, but I must have been mistaken. Tried it again and it worked.

Here's my code, in case anybody is looking at the same question later:

<BrowserRouter>
      <AppLayout
       breadcrumbs={<BreadcrumbRoutes/>}
        content={<MainContentRoutes/>}
      />
</BrowserRouter>

[...]

export const BreadCrumbRoutes = () => {
  const navigate = useNavigate();

  function followLink(e: CustomEvent) {
    e.preventDefault();
    navigate(e.detail.href);
  }

  return (
    <Routes>
      <Route
        path="/projects"
        element={
          <BreadcrumbGroup
            onFollow={followLink}
            items={[
              { text: 'Home', href: '/' },
              { text: 'Projects', href: '/projects' },
            ]}
          />
        }
      />
      <Route
        path="/projects/:projectId/onboarding"
        element={
          <BreadcrumbGroup
            onFollow={followLink}
            items={[
              { text: 'Home', href: '/' },
              { text: 'Projects', href: '/projects' },
              { text: 'Project Details', href: '/projects/:projectId' },
              { text: 'Onboarding', href: '/pojects/:projectId/onboarding' },
            ]}
          />
        }
      />
      
    </Routes>