T
TanStackโ€ข6mo ago
grumpy-cyan

beforeLoad error in createFileRoute gets handled differently depending on previous route

Hello, I had a bit of a hard time making the title clear enough. Based on where the user is coming from, if an error is thrown within a beforeLoad , the component rendered is different. You can use this deployment of the start-basic-auth example: https://tanstack-basic-auth-production.up.railway.app - note that I wasn't able to deploy it properly in any of the ide-in-the-browser options (the behavior is weirdly delayed by a few seconds) nor on netlify (I wasn't able to find a way to tell the platform to use npm run start for the start step). To reproduce the issue described, do the following: 1. Visit the root page of the app. Then, click on "Posts" to visit the /posts page. You'll see that this prompts the Login component because the beforeLoad gets triggered properly, and with a user that's not signed in, the errorComponent correctly handles the error message conditions and displays the Login form. 2. Now, from the "Posts" page, simply refresh the browser. You'll see that the beforeLoad also throws, errorComponent also handles the error, but instead of displaying the Login component, even though the condition to return it is true, the posts.route page gets rendered - where a failure to load the posts happens - the loader never runs, hence useLoaderData returns undefined. Is there something I'm not understanding regarding error handling and fallback component rendering? I would've expected the basic example to be working properly. the codebase deployed at the url shared above is the vanilla start-basic-auth found here: https://github.com/tanstack/router/tree/main/examples/react/start-basic-auth Thanks!
TanStack Start | Type-Safe, Client-First, Full-Stack React Framework
TanStack Start is a type-safe, client-first, full-stack React framework.
GitHub
router/examples/react/start-basic-auth at main ยท TanStack/router
๐Ÿค– Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
1 Reply
grumpy-cyan
grumpy-cyanOPโ€ข6mo ago
just saw this is addressed here https://github.com/TanStack/router/issues/3462 , this can be closed ๐Ÿ™‚
GitHub
Error thrown from beforeLoad and handled through errorComponent...
Which project does this relate to? Start Describe the bug When an error is thrown from beforeLoad and handled througherrorComponent it only works as expected on client navigation. When the page is ...

Did you find this page helpful?