Client-Side Routing in React: @remix-run/router vs react-router vs wouter

Routing is foundational to modern web apps, but not all routers serve the same purpose. While react-router dominates the React ecosystem, its underlying engine @remix-run/router powers it, and minimalist alternatives like wouter offer a different trade-off. Let’s compare how they handle real-world routing tasks.

🧱 Core Architecture: Engine vs Framework vs Micro-Library

@remix-run/router is a router engine, not a React library. It handles URL parsing, history management, matching, and data loading logic—but has no React components or hooks. You’d use it to build your own router.

// @remix-run/router: low-level usage
import { createRouter } from "@remix-run/router";

const router = createRouter({
  routes: [{ path: "/", loader: () => fetch("/data") }],
  history: /* your history instance */
});

router.subscribe(state => {
  // Manually update your app based on router state
});
router.initialize();

react-router is the full React integration built on top of @remix-run/router. It provides <Routes>, <Route>, useNavigate(), and other React-friendly APIs.

// react-router: standard React usage
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  { path: "/", element: <Home />, loader: () => fetch("/data") }
]);

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

wouter is a micro-library (~1.5kB) that uses hooks and context internally but exposes only a few simple hooks. It avoids render props and complex configuration.

// wouter: minimal hook-based routing
import { useLocation, useNavigate } from "wouter";

function App() {
  const [location] = useLocation();
  const navigate = useNavigate();

  return (
    <div>
      {location === "/" ? <Home /> : <NotFound />}
      <button onClick={() => navigate("/")}>Go Home</button>
    </div>
  );
}

🗺️ Route Definition: Declarative vs Programmatic vs Manual

react-router uses declarative route objects (or JSX elements in older versions). Routes can be nested, and each can define loaders, actions, and error boundaries.

// react-router: nested routes with data loading
const routes = [
  {
    path: "/users",
    element: <UsersLayout />,
    children: [
      { index: true, element: <UserList /> },
      { path: ":id", element: <UserProfile />, loader: loadUser }
    ]
  }
];

@remix-run/router requires you to manually wire up route matching and rendering. There’s no <Route> component—just raw route configs and state subscriptions.

// @remix-run/router: no built-in rendering
const routes = [{ path: "/users/:id", id: "user", loader: loadUser }];
const router = createRouter({ routes, history });

// You must interpret router.state.matches yourself
// and render the correct components based on match IDs

wouter doesn’t have a route definition system at all. You manually check the current path and render components conditionally.

// wouter: no route config—just conditional rendering
function App() {
  const [location] = useLocation();

  if (location === "/") return <Home />;
  if (location.startsWith("/users/")) {
    const id = location.split("/")[2];
    return <UserProfile id={id} />;
  }
  return <NotFound />;
}

🔁 Navigation and Hooks

All three support programmatic navigation, but with different ergonomics.

react-router provides useNavigate() and useParams():

import { useNavigate, useParams } from "react-router-dom";

function UserProfile() {
  const { id } = useParams();
  const navigate = useNavigate();

  return <button onClick={() => navigate("/users")}>Back</button>;
}

wouter offers similar hooks:

import { useNavigate, useParams } from "wouter";

function UserProfile() {
  const params = useParams(); // returns { id: "123" }
  const navigate = useNavigate();

  return <button onClick={() => navigate("/users")}>Back</button>;
}

@remix-run/router has no hooks—it’s framework-agnostic. You call router.navigate("/path") directly on the router instance.

// @remix-run/router: imperative navigation
router.navigate("/users/123");

📥 Data Loading and Transitions

react-router supports route-level data loading via loader functions and gives you transition states via useNavigation():

// react-router: loader + pending UI
import { useLoaderData, useNavigation } from "react-router-dom";

export async function loader({ params }) {
  return await fetch(`/api/users/${params.id}`).then(r => r.json());
}

function UserProfile() {
  const user = useLoaderData();
  const navigation = useNavigation();

  if (navigation.state === "loading") return <Spinner />;
  return <div>{user.name}</div>;
}

@remix-run/router also supports loaders, but you must manually track loading states from the router’s subscription:

// @remix-run/router: manual loader handling
router.subscribe(state => {
  if (state.revalidation === "loading") {
    // Show loading UI
  }
  // Render data from state.loaderData
});

wouter has no built-in data loading. You manage data fetching with useEffect or other patterns:

// wouter: manual data fetching
import { useEffect, useState } from "react";
import { useParams } from "wouter";

function UserProfile() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${id}`).then(r => r.json()).then(setUser);
  }, [id]);

  return user ? <div>{user.name}</div> : <Spinner />;
}

📦 Bundle Size and Dependencies

• react-router includes @remix-run/router as a dependency and adds React-specific layers. It’s larger but feature-rich.
• @remix-run/router is standalone and has no dependencies—it’s the leanest core router.
• wouter is the smallest overall (~1.5kB min+gzip) and has zero dependencies.

However, size isn’t everything. If your app needs nested routes, data loaders, or error boundaries, wouter will force you to rebuild those concepts manually—eroding its size advantage.

🔄 When to Use Which?

Use react-router if:

• You’re building a standard React app
• You need nested routes, data loading, or pending states
• You value convention and long-term maintainability

Use @remix-run/router if:

• You’re building a framework or library that needs routing logic
• You’re integrating routing into a non-React view layer
• You need direct access to the router’s internal state machine

Use wouter if:

• Your app has 2–5 simple routes
• Bundle size is a hard constraint
• You don’t need data loading abstractions or route nesting

⚠️ Common Pitfalls

• Don’t use @remix-run/router directly in a React app unless you’re prepared to rebuild all the React integrations (RouterProvider, hooks, etc.). You’ll end up re-implementing react-router.
• Don’t choose wouter for growing apps—migrating to react-router later means rewriting all your routing logic.
• Don’t assume wouter supports dynamic route matching out of the box—it does, but you must parse params manually or use its optional pattern matcher.

💡 Final Thought

These tools exist on a spectrum: @remix-run/router is the engine, react-router is the car, and wouter is the bicycle. Choose based on how far you’re going and how much cargo you’re carrying—not just how fast you leave the garage.