Practicality of useCurrentMatches for breadcrumb functionality

[developerdizzle]

In the docs for useCurrentMatches, there's an example for retrieving breadcrumb information:

const matches = useCurrentMatches();
const breadcrumbs = createMemo(() =>
  matches().map((m) => m.route.info.breadcrumb)
);

But, consider a typical route configuration:

<Router>
  <Route path="/" component={Home} />
  <Route path="/users" component={Users} />
  <Route path="/users/:id" component={User} />
</Router>

In this case, breadcrumbs will only consist of one item (the single-matched route). Nesting routes is the way to get multiple routes and breadcrumb data, but it's not really practical due to how nesting/layouts work:

<Router>
  <Route path="/" component={Home}>
    <Route path="/users" component={Users}>
      <Route path="/:id" component={User} />
    </Route>
  </Route>
</Router>

As far as I can tell, this means that, in practice, each route's info needs to have its full ancestry of breadcrumb data in it, which makes useCurrentMatches less useful.

The discussion I'd like to have is around the questions:

• Are any of my assumptions here incorrect?
• Is the example in the docs practical?
• Are there other approaches people are using for route configuration or breadcrumb data?