Week 7: Loaders, Actions & Protected Routes

1. Route Loaders

Fetching data inside a useEffect after a component mounts means the user sees an empty or loading component first, then data pops in a moment later — a waterfall. A loader runs before React Router renders the route at all, so the data is already available on the first render.

import { createBrowserRouter } from 'react-router';

const router = createBrowserRouter([
  {
    path: 'products/:productId',
    element: <ProductDetailPage />,
    loader: async ({ params }) => {
      const response = await fetch(`/api/products/${params.productId}`);
      if (!response.ok) throw new Response('Not Found', { status: 404 });
      return response.json();
    },
  },
]);

import { useLoaderData } from 'react-router';

function ProductDetailPage() {
  const product = useLoaderData(); // already resolved -- no loading state to handle here

  return <h1>{product.name}</h1>;
}

The loader receives the same params you'd get from useParams(), runs when navigation to that route starts, and React Router waits for it to resolve before rendering ProductDetailPage at all. useLoaderData() then just reads the already-resolved result — no isLoading flag to check inside the component, because the component never renders until the data exists.

2. Pending UI with useNavigation

A loader still takes time over the network — the difference is where the waiting happens. useNavigation() exposes the router's current navigation state, so you can show pending UI (like a top-of-page progress bar) without each page managing its own loading flag:

import { Outlet, useNavigation } from 'react-router';

function AppLayout() {
  const navigation = useNavigation();
  const isNavigating = navigation.state === 'loading';

  return (
    <div>
      {isNavigating && <div className="top-progress-bar" />}
      <Outlet />
    </div>
  );
}

navigation.state is "idle", "loading" (a loader is running for the next page), or "submitting" (an action, Section 3, is running). Placing this check in the shared layout means every route gets consistent pending UI for free, instead of each page reimplementing its own spinner.

3. Route Actions

An action is a loader's counterpart for writes: a function that handles a form submission for a route, runs the mutation, and lets React Router manage the pending/error state the same way it does for loaders.

const router = createBrowserRouter([
  {
    path: 'contacts/new',
    element: <NewContactPage />,
    action: async ({ request }) => {
      const formData = await request.formData();
      const name = formData.get('name');

      const response = await fetch('/api/contacts', {
        method: 'POST',
        body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' },
      });

      if (!response.ok) throw new Response('Failed to create contact', { status: 500 });
      return redirect('/contacts'); // navigate away on success
    },
  },
]);

import { Form, useNavigation } from 'react-router';

function NewContactPage() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <Form method="post">
      <input name="name" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Saving...' : 'Save contact'}
      </button>
    </Form>
  );
}

React Router's own <Form> (capital F, imported from react-router) looks like a plain HTML form but intercepts the submit, bundles the fields into a FormData object, and routes it to the matching route's action — no manual onSubmit, no manual fetch call, and useNavigation reports "submitting" automatically while it runs.

4. errorElement & Not-Found Routes

When a loader or action throws — like the 404 Response from Section 1 — React Router doesn't crash the whole app. It renders the nearest route's errorElement instead:

{
  path: 'products/:productId',
  element: <ProductDetailPage />,
  errorElement: <ProductError />,
  loader: productLoader,
}

import { useRouteError, isRouteErrorResponse } from 'react-router';

function ProductError() {
  const error = useRouteError();

  if (isRouteErrorResponse(error) && error.status === 404) {
    return <p>That product doesn't exist.</p>;
  }

  return <p>Something went wrong loading this product.</p>;
}

isRouteErrorResponse distinguishes a deliberate Response thrown from a loader/action (like the 404 from Section 1) from an unexpected JavaScript error, letting you show a precise message for expected failure cases and a generic one for everything else.

5. Protected Routes

A protected route needs to check auth status before rendering, and redirect to a login page if the user isn't authenticated. The cleanest implementation is a wrapper component used as a parent route's element:

import { Navigate, Outlet, useLocation } from 'react-router';
import { useAuth } from './useAuth'; // your own auth hook/context

function RequireAuth() {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    // Redirect to login, remembering where the user was trying to go
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <Outlet />; // authenticated -- render whichever child route matched
}

const router = createBrowserRouter([
  { path: '/login', element: <LoginPage /> },
  {
    element: <RequireAuth />, // no path -- wraps its children with the auth check
    children: [
      { path: '/dashboard', element: <DashboardPage /> },
      { path: '/settings', element: <SettingsPage /> },
    ],
  },
]);

A route object with children but no path acts as a pure wrapper — it doesn't match a URL segment itself, it just runs RequireAuth's check before any of its children can render. replace on the Navigate avoids leaving the blocked page in browser history, so the back button doesn't return the user to a bounce-redirect loop.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.