onEnter doesn't wait for route to be "loaded"

[KubaJastrz]

Which project does this relate to?

Router

Describe the bug

onEnter doesn't wait for route to be "loaded" as described in the documentation, as it sometimes runs in parallel to loader function.

If this is expected behavior, I'd love for the documentation to be more precise.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-cvkdwp2k?file=src%2Froutes%2Fabout.tsx,src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

Try this a couple of times, I got varied results by repeating the steps.

0. Open console
1. Be on /
2. Go to /about via navbar
3. -- sometimes onEnter starts after loader, but sometimes is starts in parallel to beforeLoad and loader
   
4. Refresh /about
5. -- onEnter always starts in parallel to beforeLoad
   

Expected behavior

onEnter always starts after loader finishes

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 132

Additional context

No response

[KubaJastrz]

I extended the example to showcase usage of loaderData in onEnter function:

see also https://tanstack.com/router/latest/docs/framework/react/guide/data-loading

[schiller-manuel]

loader is executed asynchronously in the background if the match is stale but existing.
if you configure matches to be GC'ed directly, loader will always execute synchronously before onEnter:

https://stackblitz.com/edit/tanstack-router-wwip9y6k?file=src%2Froutes%2Fabout.tsx,src%2Fmain.tsx

[KubaJastrz]

True, configuring gc and stale time does in fact change the behavior when going between / and /about routes a few times. But refreshing on /about (thus clearing any cache) still causes onEnter to start before loader in your example.

[nklhtv]

I have the exact same issue. In my app, beforeLoad returns an object, which is expected to be available in onEnter's context param, but it is undefined at runtime.
Tested with react-router 1.125.6.

  beforeLoad: () => {
    console.log('home - beforeLoad');
    return {
      a: 1
    }
  },
  onEnter: ({ context }) => {
    console.log('home - onEnter', context.a); // a is expected to be a number, but it is undefined
  },

[schiller-manuel]

@nklhtv cannot reproduce this here: https://stackblitz.com/edit/tanstack-router-f85pwgwa?file=package.json,src%2Froutes%2Findex.tsx

can you please provide a complete minimal example?

[achou11]

I'm also running into this but couldn't figure out how to reproduce via stackblitz. I basically have the same setup as what's described in #3293 (comment) in a route.tsx file.

Tried out @tanstack/react-router@1.170.19-pre.0 (release page) which has the loader rewrite work and that seemed to solve the problem for me! Looking forward to that fix being available in a stable release 😄

---

EDIT: Some more specifics that may provide some hints for reproducing/testing:

I'm only running into this in a very specific case in my app despite a couple of places having a similar setup. This is what happens in the app:

1. Upon initial load of the app, I have a /routes/index.tsx file route that performs a redirect to a subpage via beforeLoad e.g. calling redirect({ to: '/foo/', replace: true }).

2. I have /routes/foo/index.tsx and routes/foo/route.tsx, where the latter has the loader setup that has the original issue.

This is the only time I run into the issue. If I started elsewhere in the app and then manually navigate to /foo/, I don't see the issue.

Also, I'm only seeing this on a specific machine 🙃 :

• Linux = issue
• macOS = no issue