beforeLoad of child route is called even when parent’s beforeLoad throws an error

[gynekolog]

Which project does this relate to?

Router

Describe the bug

When using beforeLoad in nested routes, the expected behavior is that if a parent route’s beforeLoad function throws an error, the child routes’ beforeLoad functions should not be executed.

However, in the current behavior, even when the parent route’s beforeLoad throws an error, the beforeLoad of the child route is still invoked.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-cu9mdexv

Steps to Reproduce the Bug or Issue

1. Visit https://stackblitz.com/edit/tanstack-router-cu9mdexv
2. Open console
3. Navigate to the Posts route.
4. Navigate to any Post.
5. The post route throw an error, it's expected. But in the console you can see the console.warn from the post.index route.

Expected behavior

The child route’s beforeLoad should not be called if the parent’s beforeLoad throws.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• @tanstack/react-router 1.120.3
• react 19.0.0

Additional context

The reproduction is forked https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based.
Changes:

• add posts.$postId.index.tsx
• add beforeLoad to the posts.$postId.tsx and posts.$postId.index.tsx
• remove defaultPreload: 'intent' from the main.tsx

Possibly a related discussion
Possibly a related issue

[Yanis02015]

I'm also experiencing the same issue. You can reproduce it using the TanStack Start start-basic-auth example — but it's a router-related problem.

To reproduce:

1. Go to the /posts page.

2. Refresh the page.

3. Wait two to three seconds — the issue should appear.

So yes, it seems the problem occurs because a child's beforeLoad doesn't wait for the parent beforeLoad to achieve ? Especially if the parent throws an exception.

A temporary workaround is to use Non-Redirected Authentication and avoid throwing exceptions inside beforeLoad.

For the case of authentication specifically, the best solution seems to me to throw a redirection directly as in the example in the documentation:

// src/routes/_authenticated.tsx
export const Route = createFileRoute('/_authenticated')({
  beforeLoad: async ({ location }) => {
    if (!isAuthenticated()) {
      throw redirect({
        to: '/login',
        search: {
          // Use the current location to power a redirect after login
          // (Do not use `router.state.resolvedLocation` as it can
          // potentially lag behind the actual current location)
          redirect: location.href,
        },
      })
    }
  },
})

[mwood23]

Just hit this myself, super gnarly!