Stale value of routeContext when useRouter().state.matches gets called in parent layout component

[pankaj-ch]

Describe the bug

I believe, due to memoization on the Match and MatchInner components, the useRoute() hook isn't receiving the routeContext of children correctly.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-bynomg?file=src%2Froutes%2F_layout.tsx

Steps to Reproduce the Bug or Issue

Step 1: Define a component which uses the route context of the accumulated route (e.g. breadcrumb) on a top-level layout component.
Step 2: navigate to a different route as a child component.
Step 3: Notice that the parent component didn't have an up-to-date copy of the child route context.

Expected behavior

The route context should be updated in the parent layout if there are changes in the route at the children's level.
Expected behaviour: https://stackblitz.com/edit/tanstack-router-vllv2a?file=src%2Froutes%2F_layout.tsx

Screenshots or Videos

No response

Platform

• All platforms

Additional context

No response

[schiller-manuel]

duplicate of #2101

use useRouterState instead

see https://stackblitz.com/edit/tanstack-router-ufw5ne?file=src%2Froutes%2F-component%2Fbreadcrumb.tsx

[pankaj-ch]

Thank you so much @schiller-manuel for your quick response and solution.

Could we update the documentation with the same snippet you shared?
https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context

[schiller-manuel]

sure! can you make a PR for the docs ?