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

More React tasks

useLoaderData Hook
Deferred Data Loading

Back to the full TanStack Router cheat sheet