Wouter
By the Wouter open-source community
Wouter is a minimalist routing library for React and Preact applications, built to provide URL-based navigation with a tiny bundle footprint instead of a large feature set. It exposes a small collection of hooks and components for matching…
Definition
Wouter is a minimalist routing library for React and Preact applications, built to provide URL-based navigation with a tiny bundle footprint instead of a large feature set. It exposes a small collection of hooks and components for matching routes, reading parameters, and navigating programmatically, using the browser's History API or a custom location hook under the hood. Wouter is popular in projects where every kilobyte of JavaScript matters and the routing needs are straightforward.
Overview
Wouter exists to answer a specific complaint developers had with mainstream React routers: that a full-featured router can add many kilobytes to a bundle even for apps that only need a handful of routes. It was built around a hooks-first API from the outset, favoring functions like `useRoute` and `useLocation` over the component-heavy patterns older routers relied on, which keeps both the API surface and the runtime code small. Under the hood, Wouter matches the current path against route patterns using a lightweight regular-expression-based matcher, and it tracks location changes either through the browser's native History API or through a pluggable location hook, which is what allows it to work in non-browser environments such as React Native or server-rendered contexts with a custom adapter. Because the core library has almost no dependencies, its total size stays in the low kilobytes, an order of magnitude smaller than many alternatives. Where React Router aims to be a comprehensive solution with data loading, nested layouts, and deep integration with frameworks like Remix, Wouter deliberately stays narrow: it matches paths, extracts parameters, and lets you navigate, and it leaves everything else, including data fetching and layout composition, to the rest of the application. This makes it closer in spirit to Reach Router's simplicity than to React Router's breadth, though without Reach Router's specific accessibility focus. In practice, Wouter shows up in small-to-medium single-page apps, embedded widgets, browser extensions, and any project where bundle size is a measured constraint, such as apps targeting low-bandwidth users. Its hook-based API also appeals to developers who prefer functional composition over router-specific component trees. The trade-off for that small footprint is a narrower feature set: Wouter does not provide built-in data loading, route-level code splitting helpers, or the kind of nested-layout conventions that frameworks like Remix build around React Router. Teams that need those capabilities, or that want an opinionated full-stack routing story, generally reach for React Router or a meta-framework's built-in router instead, reserving Wouter for cases where minimalism is itself the requirement. Because it has so little abstraction over the underlying platform, debugging routing issues in Wouter also tends to be more direct, since there are fewer layers between the application code and the browser's location APIs than in a larger router with its own internal state management and middleware pipeline. This directness also makes Wouter's source code approachable enough for teams to read through in full when they need to understand exactly how a routing edge case is handled, something that is far less practical with a larger, more abstracted routing library.
Key Features
- Hooks-first API centered on useRoute, useLocation, and useParams
- Total bundle size in the low kilobytes with almost no dependencies
- Regular-expression-based path matching for route patterns
- Pluggable location hook allows use outside standard browser history
- Compatible with both React and Preact
- No built-in data loading or layout system, by design