Which project does this relate to?

Router

Describe the bug

When using a route with a pending component, the route's component is rendered without awaiting async beforeLoad leading to incomplete context data, leading to undefined errors.

When using a route with a pending component, if the route has already been preloaded (e.g. preload intent, or previously loaded), upon loading the route again, the route's component is rendered without the resolved async beforeLoad context temporarily while beforeLoad is resolving leading to undefined errors.

For example with this route definition with a beforeLoad that has an awaited promise, a pendingComponent and a component

export const Route = createFileRoute('/posts')({
  beforeLoad: async () => {
    const test = await new Promise<string>((resolve) =>
      setTimeout(() => resolve('hello world'), 1000)
    );
    return {
      test,
    };
  },
  component: PostsLayoutComponent,
  pendingComponent: () => 'loading',
});

In the route component, when I try to use the context

function PostsLayoutComponent() {
  const { test } = Route.useRouteContext();

I expect the value of test to be a string as the types infer, but it's rendered with undefined while the route is pending (the second time).

I'm not sure if the bug is either

• the route's component should not be rendered during pending state
• the beforeLoad should be awaited when there is a pending component

The pending component is a significant factor because if I remove the pending component, then this bug does not occur. The route component is always rendered with the correct context from awaited beforeLoad.

Note: the repro has defaultPendingMs: 0 set to always show the pending component.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-onocc5sg?file=src%2Froutes%2Fposts.route.tsx

Steps to Reproduce the Bug or Issue

1. Open browser devtools console
2. In the preview, click on "Posts" (navigate while the route is preloading, so don't pause between hover and click. Alternate repro without preloading below)
3. See console logs for route component rendering with missing context value for the property test

beforeLoad
route component render
Route context test: undefined
beforeLoad done
route component render
Route context test: hello world

Alternate repro

https://stackblitz.com/edit/tanstack-router-l9rbq6h5?file=src%2Froutes%2Fposts.route.tsx

1. Open browser devtools console
2. In the preview, click on "Posts"
3. Click on "Home"
4. Click on "Posts" again
5. See console logs for route component rendering with missing context value for the property test### Expected behavior

I expect the route component to be rendered with the route context with beforeLoad awaited, as the types suggest.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.131.27
• OS: Windows
• Browser: Chrome
• Browser Version: 139.0.7258.67
• Bundler: vite
• Bundler Version: 6.3.6

Additional context

No response