How toAccess Remix's loader data from a route ErrorBoundary
If you want to access a route loader data inside an ErrorBoundary, you can use the useRouteLoaderData
hook, this hook will return the loader data or undefined in case the loader failed or the route doesn't match the current URL.
app/root.tsx import { useRouteLoaderData } from "@remix-run/react"; export function ErrorBoundary() { let data = useRouteLoaderData<typeof loader>(routeId); // code }
You will need to get the routeId
from the route you want to access, which for the app/root.tsx
file is just root
and for any other route is the file without the extension, so for app/routes/_.posts.tsx
the routeId is routes/_.posts
and for app/routes/_.posts_.$postId/route.tsx
the routeId is routes/_.posts_.$postId
.
Also Remember to always check if data exists since it's possible it may not be there.