Layout Routes without a path or index throw an error with useBreadcrumbs

[iainsimmons]

I was attempting to use Layout routes so I didn't have to import and wrap each route component into the same Layout component, but using a route object with breadcrumb properties and useRoutes, I get the following:

Unhandled Runtime Error
Error: useBreadcrumbs: `path` or `index` must be provided in every route object

app.js:

export let routes = [
  {
    element: <Layout />,
    breadcrumb: null,
    children: [
      {
        path: 'home',
        element: <Home />,
        breadcrumb: 'Home',
      },
      {
        path: 'about',
        element: <About />,
        breadcrumb: 'About Us',
      },
    ],
  },
];

export default function App() {
  let appRoutes = useRoutes(routes);
  return appRoutes;
}

components/breadcrumbs.js

import { NavLink } from 'react-router-dom';
import useBreadcrumbs from 'use-react-router-breadcrumbs';
import { routes } from '../app';

export default function Breadcrumbs() {
  const breadcrumbs = useBreadcrumbs(routes);
  return (
    <nav className="breadcrumbs" aria-label="Breadcrumbs">
      {breadcrumbs.map(({ match, breadcrumb }) => (
        <span key={match.pathname}>
          <NavLink to={match.pathname}>{breadcrumb}</NavLink>
        </span>
      ))}
    </nav>
  );
}

[icd2k3]

Thanks for reporting @iainsimmons - I'm still getting up to speed with the v6 changes

The PageLayout route is admittedly weird. We call it a layout route because it doesn't participate in the matching at all (though its children do). It only exists to make wrapping multiple child routes in the same layout simpler. If we didn't allow this then you'd have to handle layouts in two different ways: sometimes your routes do it for you, sometimes you do it manually with lots of layout component repetition throughout your app:

So in this case it sounds like we expect use-react-router-breadcrumbs not to require a path or index if children are present (meaning we can assume it's a LayoutRoute) - does that sound right?

[iainsimmons]

Thanks for reporting @iainsimmons - I'm still getting up to speed with the v6 changes

The PageLayout route is admittedly weird. We call it a layout route because it doesn't participate in the matching at all (though its children do). It only exists to make wrapping multiple child routes in the same layout simpler. If we didn't allow this then you'd have to handle layouts in two different ways: sometimes your routes do it for you, sometimes you do it manually with lots of layout component repetition throughout your app:

So in this case it sounds like we expect use-react-router-breadcrumbs not to require a path or index if children are present (meaning we can assume it's a LayoutRoute) - does that sound right?

Yes, that looks like it would work. Here's the source code for those routes and the props it will accept/expect:
https://github.com/remix-run/react-router/blob/main/packages/react-router/index.tsx#L205-L236

[icd2k3]

@iainsimmons give 3.0.1 a shot, it should permit Layout Routes now