Breadcrumbs, useMatches(), layouts, nested routes, and file-based routing.

[MGSimard]

(Don't mind the longer keyword-y title it's for the searchers & googlers)

Implementing breadcrumbs with useMatches() to render matching routes, rather than letting made up URLs through with useLocation(). I'm opting for useMatches() along with loader: () => ({ crumb: "whatever" }) on each route.

/dashboard
  route.tsx (layout)
  index.tsx (/dashboard)
  settings.index.tsx (/dashboard/settings)
  settings.nested.tsx (/dashboard/settings/nested)

The issue comes in where useMatches() will omit /dashboard/settings due to never actually passing through /dashboard/settings to reach /dashboard/settings/nested, since settings is its own individual page file rather than a layout route.

const matches = useMatches();
console.log(matches);

[ 
  { "id": "__root__", ... },
  { "id": "/dashboard", ... , "loaderData": { "crumb": "Dashboard" } },
  { "id": "/dashboard/settings/nested", ... ,"loaderData": { "crumb": "Nested" } }
]

Now though you could get all four entries from useMatches() by renaming settings.index.tsx to settings.tsx, this turns it into a layout for settings/nested, so you lose proper navigability as individual pages.

---

So ultimately, the working solution here seems to be to add a settings.tsx layout file with no actual layout content inside other than <Outlet /> and the loader crumb:

/dashboard
  route.tsx (layout)
  index.tsx (/dashboard)
  settings.tsx (layout with ZERO content other than <Outlet /> and loader crumb)
  settings.index.tsx (/dashboard/settings)
  settings.nested.tsx (/dashboard/settings/nested)

Which then gives me proper individual pages for both settings and settings/nested, while also getting the right output from useMatches()

[ 
  { "id": "__root__", ... },
  { "id": "/dashboard", ... , "loaderData": { "crumb": "Dashboard" } },
  { "id": "/dashboard/settings", ... , "loaderData": { "crumb": "Settings" } },
  { "id": "/dashboard/settings/nested", ... ,"loaderData": { "crumb": "Nested" } }
]

But then you end up with that extra /settings.tsx layout file whose only purpose is to render an <Outlet /> & crumb for the sake of this very specific behaviour.

Wondering if there's a cleaner way to achieve this?

[barbalex]

Yeah, I am also unable to accumulate loaderData due to index routes being ignored.
Would be nice if someone could answer the question.