React Router

Why React Router?

React Router is arguably the most critical non-Meta library in the React ecosystem. It has evolved from a simple component-based router into a full-fledged framework for managing application state via the URL.

• Nested Routing: Its defining feature. React Router maps URL segments directly to component hierarchies (nested layouts), allowing specific portions of the page to update while preserving the surrounding UI.
• Data Loading APIs: With v6.4+ and v7, it introduced loader and action functions. This moves data fetching out of the component lifecycle (useEffect), eliminating "render-then-fetch" waterfalls and enabling parallel data fetching.
• Standards-Based: It relies heavily on Web Standards (Request, Response, FormData, URLSearchParams), making your knowledge portable to other web domains.
• Optimistic UI: Built-in hooks like useFetcher allow developers to update the UI immediately while background network requests complete, making apps feel instant.
• Restoration & Stability: Handles scroll restoration, error boundaries, and pending states out of the box, solving complex UX challenges that manual routing implementations often miss.

Code Snippet

Modern React Router uses a "Data Router" pattern defined outside the render tree. This enables the router to start fetching data before rendering components.

import {
  createBrowserRouter,
  RouterProvider,
  useLoaderData,
  Form,
  redirect
} from "react-router-dom";

// 1. Define a Loader: Fetches data before the route renders
const projectLoader = async ({ params }) => {
  const res = await fetch(`/api/projects/${params.id}`);
  if (!res.ok) throw new Response("Not Found", { status: 404 });
  return res.json();
};

// 2. Define an Action: Handles form submissions (mutations)
const updateProjectAction = async ({ request, params }) => {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await fetch(`/api/projects/${params.id}`, {
    method: "PUT",
    body: JSON.stringify(updates),
  });
  return redirect(`/projects/${params.id}`);
};

// 3. Component uses hooks to access data
function ProjectView() {
  const project = useLoaderData();
  
  return (
    <div>
      <h1>{project.name}</h1>
      {/* Form triggers the 'action' without manual fetch calls */}
      <Form method="post">
        <input name="name" defaultValue={project.name} />
        <button type="submit">Update</button>
      </Form>
    </div>
  );
}

// 4. Router Configuration
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        path: "projects/:id",
        element: <ProjectView />,
        loader: projectLoader,
        action: updateProjectAction,
      },
    ],
  },
]);

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

Pros and Cons

React Router is the default choice for a reason, but its extensive feature set brings trade-offs compared to lighter alternatives.

Pros

• Ecosystem Dominance: Massive community support, endless tutorials, and compatibility with virtually every other React library.
• Performance: The Data Router APIs significantly improve perceived performance by decoupling fetching from rendering.
• Full-Stack Ready: The API design in v7 aligns perfectly with Remix (now also part of React Router), allowing SPAs to incrementally adopt server-side rendering (SSR) without a rewrite.
• Nested Layout Handling: Still offers the most intuitive mental model for complex dashboards where multiple layers of UI need to switch independently.

Cons

• Bundle Size: It is heavier than alternatives like wouter or tanstack-router (though tree-shaking helps). It includes a lot of logic for history management and matching.
• Versioning Fatigue: The transition from v5 (component-based) to v6 (hooks/elements) to v7 (data APIs/framework) has been a source of friction and confusion for maintainers of legacy codebases.
• Loose Typing: While it supports TypeScript, it does not offer "type-safe routes" (e.g., typed params and paths) out of the box as strictly as TanStack Router does.

Comparison with Other Routing Libraries

Ecosystem & Extensions

React Router is the foundation of a broader ecosystem that extends its capabilities:

• Remix: React Router v7 essentially is Remix. You can "upgrade" a React Router SPA to a Remix SSR app just by changing the configuration, unlocking server-side loaders and SEO capabilities.
• react-router-dom: The DOM bindings (what you usually install).
• react-router-native: Bindings for React Native, allowing you to share routing logic between web and mobile apps.