useLoaderData Hook in React

From the TanStack Router cheat sheet · Data Loading · verified Jul 2026

useLoaderData Hook

Access loader data in components

typescript

import { getRouteApi } from '@tanstack/react-router'

const routeApi = getRouteApi('/posts/$postId')

function PostComponent() {
  const post = routeApi.useLoaderData()
  return <div>{post.title}</div>
}

💡 getRouteApi for components without route access

⚡ Fully type-safe loader data

🔍 Can access parent route loader data

🎯 Data available before component renders

useLoaderDatahookdata-access

More React tasks

Route Loader
Deferred Data Loading

Back to the full TanStack Router cheat sheet