[Docs]: No explanation for using useMatches for generating breadcrumbs with plain router objects

[irakli2206]

[Docs]: No explanation for using useMatches for generating breadcrumbs with plain router objects

[kiliman]

useMatches works on the routes hierarchy, so for a given route, you'll only get matches for each parent route. It doesn't consider other routes that happen to share a partial prefix.

So this works, as <PollDetail> is a child of <Poll>

{
  path: '/',
  element: <Layout />,
  children: [
    {
      path: 'poll',
      element: <Poll />,
      children: [
        {
          path: ':id',
          element: <PollDetail />,
        },
      ],
    },
  ],
}

Instead of this, where <PollDetail> is a sibling of <Poll>. So useMatches will not include matches for sibling routes even though they both have /poll prefix.

{
  path: '/',
  element: <Layout />,
  children: [
    {
      path: '/poll',
      element: <Poll />,
    },
    {
      path: '/poll/:id',
      element: <PollDetail />,
    },
  ],
}

[brophdawg11]

Can you elaborate on what information you would want to be added and to which pages? Is this an misunderstanding of how breadcrumbs via useMatches work? Or a misunderstanding of the concept of an index route?

[irakli2206]

If I add a few routes as children of another route, it will consider the parent route as a layout wrapping the children. I don't want that to happen. I want the subroutes to be subroutes merely based on the way the paths are structured, i.e. parent page /poll will go to another page of /poll/:poll_id. If I make the routes siblings to each other instead of nesting one into the other, then useMatches won't realize that one route is logically connected to the next route. In other words breadcrumbs can only work for layouts and direct children of layouts. Please read the stackoverflow post, it's explained much better there.

[irakli2206]

I see. I thought there's a way to make it work without nesting. Thanks.

[brophdawg11]

I do think that the proper nesting and use of index routes is the right solution here, however:

I want the subroutes to be subroutes merely based on the way the paths are structured

It sounds like maybe you just want strict URL-based breadcrumbs and don't care about the route/UI nesting? If so you don't want to use useMatches (which is tightly coupled to the route hierarchy by design as mentioned above) and instead can create your breadcrumbs via the URL segments: useLocation().pathname.split('/')