[Feature]: Have ability to read route id from the nearest route context

[hasan-wajahat]

What is the new or updated feature that you are suggesting?

Just like we can use useLoaderData hook to get loader data from nearest route context, it can be useful to get id of the nearest route context.
Keep in mind useMatches hook matches for all routes not the nearest route context so that won't be of any help here.

Why should this feature be included?

For me personally I need it because I want to depend upon the auto-generated id to get nesting depth of a specific element and I can't come up with any cleaner way. But it may be useful for other people to have access to id for their own reasons.

[timdorr]

useMatches is ordered, so you can just do matches[matches.length - 1] to get it. Either that or make use of the handle prop.

[hasan-wajahat]

useMatches doesn't work because I have nested routes and for every single component matches[matches.length - 1]will result in the same match object.
I have thought a lot about using handle but how do I access handle for that specific element in a nested hiererachy. How do I get the correct index in the matches array? As far as I know there is no hook like useHandle.

This is what my route structure looks like:

<Route path="root" element={<Wrapper><Root /></Wrapper>}>
  <Route path="home" element={<Wrapper><Home /></Wrapper>}>
    <Route path="child" element={<Wrapper><Child /></Wrapper>} />
  </Route>
</Route>

I need to know inside my wrapper component what is its nesting depth inside the routing hierarchy.

[timdorr]

useMatches provides the handles for you. You can matches.filter or matches.find based on the match.handle value, which is an any.

[hasan-wajahat]

Thanks @timdorr, I have been trying that approach as well. But right now if I need to get the exact match I need to pass the same value to match.handle and to my wrapper component. Is there any other way? Like being able to access handle value inside of wrapper component? To limit the repetitive values.