useMatches doesn't return handle data from all Index routes

[EduardoLopes]

I've been playing with nested routes and breadcrumbs and i think there's something I'm missing, if it's not a bug.

I made a reproduction: https://codesandbox.io/s/react-router-breadcrumb-v1-bjxuqj?file=/src/App.tsx

Example 1

I'm setting the breadcrumb data in the index route handle, but useMatches doesn't return the data for all the routes, only for the current route. Is this expected and the data should be placed in the parent route handle instead?

Example 2

The data is returned, but the route doesn't change. I guess that's because If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Example 3

This one works as i was expecting, but it took me some time really figure out. I needed to set the data in the handle of the parent route, the docs doesn't say anything about this.

[brophdawg11]

Example 1 is correct since you're not matching nested-1/index anymore when you go to nested-1/nested-2. If you want to match the crumbs all the way down they need to be on the parent route that matches (as you did in Example 3).

Example 2 is missing <Outlet/> components in the parent routes so that's why you're not seeing any of the child content render even though they're properly matching. This is likely the setup you want.

Example 3 is how I'd expect this to work if you need specific index routes when not matching deeper.

I needed to set the data in the handle of the parent route, the docs doesn't say anything about this

I'm not quite sure what's unclear here? /nested-1/nested-2 will not match the Nested1 index route and will match the path="nested-2" route

<Route element={<GlobalLayout title="Example 3" />}>
  <Route path="/" handle={{ crumb: "Home Crumb" }}>
    <Route index element={<h2>Home</h2>} />
    <Route path="nested-1" handle={{ crumb: "Crumb 1" }}>
      <Route index element={<h2>Nested 1</h2>} />            ❌ Not matched for /nested-1/nested-2
      <Route path="nested-2" handle={{ crumb: "Crumb 2" }}>  ✅ Matched for /nested-1/nested-2
      ...