Router context not injected in child routes upon hydration

[nedpals]

Which project does this relate to?

Router

Describe the bug

I have a routing structure that involves creating nested layout routes like this:

routes/
  _auth/
    // ...page for authenticated
    some-auth-page.tsx
    _with_header/
      // ...page for authenticated + (with navbar)
      profile.tsx
  _guest/
    // ... page for guests
  _root.tsx
  some-page.tsx

The /_auth route is where it injects the current user data which can be accessed by all of the routes under it and for some routes that I need to add a header/navbar, I just put them inside the /_with_header group route. Again, /_with_header is a child route under the /_auth group route.

There were no problems so far up to the type completions. However when I go to /profile on a fresh load, the route context was not injected in the /_with_header layout upon hydration.

The problem disappears when beforeLoad is executed on client when navigating from another page.

Your Example Website or App

https://stackblitz.com/edit/github-9rncraue?file=app%2Froutes%2F_privileged%2F_another_one.tsx

Steps to Reproduce the Bug or Issue

1. Create a parent _ group route and child _ group route under it. Create the layout routes for the said group routes.
2. For the parent group route, inject any kind of payload into beforeLoad lifecycle.
3. Add a page under the child group route and display the recently injected context data.
4. In the browser, go to the said page, and expect that the data will be displayed for a brief moment and disappears upon hydration.

Expected behavior

The route context is injected as per docs.

Screenshots or Videos

Here's from Devtools:

And here's the details for the /_auth route:

Similarly, as I make the reproduction, the /some-auth-page route I made under the /_auth route did not also get the context but only the layout.

However, when I navigate to the profile page from the home page. The context is loaded as usual (beforeLoad is triggered on client):

Platform

• OS: macOS 14.6.1 Sonoma
• Browser: Chrome
• Version: 131 / TanStack Start 1.98.3

Additional context

I am also using Tanstack Query with the @tanstack/react-router-with-query package thus the queryClient is automatically injected into the route context. However, I also tried without and the issue still persists.