Component being rendered before `beforeLoad()` has completed
Describe the bug
After setting up a simple app with authentication, when I log in, the beforeLoad() function does not complete before my route is rendered. This causes an error as the context does not contain values I expect.
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-ep72yj?file=src%2Froutes%2F_auth.dashboard.tsx
Steps to Reproduce the Bug or Issue
- Make sure you are in a logged out state
- Click on the second link 'Go to the auth-only dashboard page'
- Enter a username and click 'Login'
After an expected delay an error occurs. Since the beforeLoad() has not completed, the value property has not been added to the context.
Expected behavior
I would expect the beforeLoad() to finish running before the loader() runs or the component is rendered.
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Edge
- Version: 126.0.2592.68 (Official build) (64-bit)
Additional context
This issue seems to happen in part due to the fact that when the user logs in, the InnerApp (in main.tsx) rerenders due to a state update in the AuthContext. This results in the RouterProvider being re-rendered. This re-render happens in addition to the call to router.navigate() from the login.