router icon indicating copy to clipboard operation
router copied to clipboard

Component being rendered before `beforeLoad()` has completed

Open JohnLowtherTA opened this issue 1 year ago • 0 comments

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

  1. Make sure you are in a logged out state
  2. Click on the second link 'Go to the auth-only dashboard page'
  3. 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.

JohnLowtherTA avatar Jun 25 '24 16:06 JohnLowtherTA