Route Loader in React
From the TanStack Router cheat sheet · Data Loading · verified Jul 2026
Route Loader
Define loader function to fetch data
typescript
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetchPost(params.postId)
return post
},
component: PostComponent,
})
function PostComponent() {
const post = Route.useLoaderData()
return <h1>{post.title}</h1>
}💡 Loader runs before component renders
⚡ Built-in SWR caching with staleTime
🔍 loaderDeps controls cache keys
🎯 abortController for request cancellation
loaderdatafetch
Continue with TanStack Router
Save the full cheat sheet or work through every related task.