React Router data APIs: loaders and actions

React Router Data APIs

React Router v6.4+ introduced data APIs that move data fetching out of components and into route definitions. Loaders fetch data before rendering; actions handle form submissions.

Setup with createBrowserRouter

import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router-dom';

async function usersLoader() {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Response('Not Found', { status: 404 });
  return res.json();
}

function UsersPage() {
  const users = useLoaderData();
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

const router = createBrowserRouter([
  {
    path: '/users',
    element: <UsersPage />,
    loader: usersLoader,
    errorElement: <ErrorPage />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Loaders run before the component renders, eliminating the loading-state flicker of useEffect data fetching. Set errorElement on routes to catch loader errors. Actions handle POST requests from React Router's <Form> component and revalidate loader data automatically after submission.