SamwithCode

Fetch Api React Router Loader 2025

React Router Loader Example

In React Router 6.4+, we can fetch data before the component renders using a loader. This makes the component clean and keeps data logic outside.

🧠 Step-by-Step

  • Create a loader function that fetches API data.
  • Connect the loader to your route config.
  • Use useLoaderData() to access data inside the component.

📦 Example Code:


// 📁 src/routes/Users.jsx
import { useLoaderData } from "react-router-dom";

export async function usersLoader() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!response.ok) {
    throw new Error("Failed to fetch users");
  }
  return response.json();
}

export default function UsersPage() {
  const users = useLoaderData();

  return (
    

      
Users List

      
    
        {users.map(user => (
          
  • 
            {user.name} - {user.email}
          
    • 
        ))}
      

    

  );
}

🔗 Setup in Routes


// 📁 App.jsx or routes.jsx
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import UsersPage, { usersLoader } from "./routes/Users";

const router = createBrowserRouter([
  {
    path: "/users",
    element: ,
    loader: usersLoader, // 🔁 Attach loader here
  },
]);

export default function App() {
  return ;
}

✅ Benefits

  • Cleaner Components
  • Better SEO-friendly rendering
  • Error handling & Suspense supported