Client-Side Routing Solutions for React Applications
These libraries manage navigation in React apps without full page reloads. react-router-dom is the standard for web, react-router is its core logic, @reach/router is deprecated, and wouter is a lightweight alternative.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
React Routing Libraries: Architecture, API, and Maintenance Compared
These libraries handle navigation in React applications without requiring full page reloads. While they share the same goal, their maintenance status, API design, and intended use cases differ significantly. Let's compare how they tackle common routing problems.
⚠️ Maintenance Status: Active vs Deprecated
@reach/router is no longer maintained.
- The team merged it into React Router v6.
- Using it introduces security and compatibility risks.
// @reach/router: Deprecated API
import { Router, Link } from "@reach/router";
// Do not use in new projects
react-router is the core logic package.
- It works for any React renderer (Web, Native).
- For web apps, you usually install
react-router-dominstead.
// react-router: Core exports
import { Routes, Route } from "react-router";
// Typically re-exported via react-router-dom for web
react-router-dom is the standard for web.
- It includes
react-routerfeatures plus browser specifics. - Actively maintained and widely adopted.
// react-router-dom: Web-specific entry
import { BrowserRouter, Routes } from "react-router-dom";
// Use this for standard web applications
wouter is actively maintained.
- Focused on minimalism and hooks.
- Great for lightweight needs.
// wouter: Lightweight alternative
import { Router, Route } from "wouter";
// Use for small bundles or Preact projects
🗂️ Defining Routes: Components vs Hooks
react-router-dom uses a component-based structure.
- Wrap your app in
BrowserRouter. - Define paths using
RoutesandRoutecomponents.
// react-router-dom: Component-based routes
<BrowserRouter>
<Routes>
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
react-router follows the same pattern.
- Since
react-router-domre-exports these, the API is identical. - The difference lies in the history implementation (memory vs browser).
// react-router: Same component API
<Router history={customHistory}>
<Routes>
<Route path="/about" element={<About />} />
</Routes>
</Router>
@reach/router used a similar component style.
- It used
RouterandRoutebut with different props. - This API is now legacy.
// @reach/router: Legacy component style
<Router>
<About path="/about" />
</Router>
wouter supports both components and hooks.
- You can use
Routecomponents or theuseRoutehook. - Simpler API surface overall.
// wouter: Hook-based or component
<Router>
<Route path="/about" component={About} />
</Router>
// Or using hooks inside a component
const [match, params] = useRoute("/users/:id");
🧭 Navigation: Links vs Programmatic
react-router-dom provides a <Link> component.
- Prevents default page reloads.
- Supports
toprop for paths.
// react-router-dom: Link component
<Link to="/about">About Us</Link>
react-router exposes navigation hooks.
useNavigateallows programmatic control.- Useful for forms or redirects.
// react-router: Programmatic navigation
const navigate = useNavigate();
<button onClick={() => navigate("/about")} />;
@reach/router had its own <Link>.
- Functioned similarly but is now obsolete.
- Migration requires changing imports.
// @reach/router: Legacy Link
<Link to="/about">About Us</Link>
wouter offers a minimal <Link>.
- Works just like the standard HTML anchor but intercepts clicks.
- Also supports the
useLocationhook for manual control.
// wouter: Minimal Link
<Link href="/about">About Us</Link>
// Or hook
const [location, setLocation] = useLocation();
🎯 Dynamic Parameters: Matching URLs
react-router-dom uses colon syntax.
- Extract params via
useParamshook. - Type-safe with TypeScript support.
// react-router-dom: Params
<Route path="/user/:id" element={<User />} />
// Inside component
const { id } = useParams();
react-router handles matching logic.
- The core matcher works the same way.
- Consistent behavior across platforms.
// react-router: Core matching
// Logic is shared with react-router-dom
const { id } = useParams();
@reach/router used similar syntax.
- Params were passed as props to the component.
- Less hook-focused than v6.
// @reach/router: Props based
function User({ userId }) { ... }
<Route path="/user/:userId" component={User} />
wouter uses standard capture groups.
- Returns params as an object from
useRoute. - Very straightforward.
// wouter: Hook params
const [match, { id }] = useRoute("/user/:id");
🧩 Similarities: Shared Ground
While the differences are clear, these libraries also share many core ideas and tools. Here are key overlaps:
1. ⚛️ React-Based
- All use functional components and hooks.
- Integrate with standard React render cycles.
// All: Functional Component
function Page() { return <div>Hello</div>; }
2. 🔗 Client-Side Navigation
- All prevent full page reloads.
- Update the URL bar without refreshing.
// All: Intercepting clicks
// Implementation varies, goal is the same
3. 🔒 History Management
- All interact with the browser history API.
- Support back/forward buttons.
// All: History sync
// window.history is manipulated internally
📊 Summary: Key Differences
| Feature | react-router-dom | wouter | @reach/router |
|---|---|---|---|
| Status | ✅ Active | ✅ Active | ❌ Deprecated |
| Size | 📦 Standard | 🪶 Tiny | 📦 Legacy |
| API Style | Components + Hooks | Hooks + Components | Components (Legacy) |
| Use Case | Enterprise Apps | Small Tools | Do Not Use |
💡 The Big Picture
react-router-dom is the safe bet for most teams. It has the features, the docs, and the community support.
wouter is the specialist choice. If you count every kilobyte or use Preact, this is your tool.
@reach/router and react-router (core) have specific roles. Avoid Reach entirely. Use core react-router only if you aren't building for the web.
Final Thought: Routing is infrastructure. Pick the tool that will still be supported when you need to fix a bug two years from now.
How to Choose: @reach/router vs react-router vs react-router-dom vs wouter
- @reach/router:
Avoid this package for any new development. It is officially deprecated and has been merged into React Router v6. Continuing to use it creates technical debt and potential security risks. You should migrate existing projects to
react-router-domimmediately. - react-router:
Select this package only if you are building for a non-DOM environment like React Native. For standard web applications, this package is a dependency of
react-router-domand does not need to be installed separately. Using it directly on the web requires manual history configuration. Stick to the DOM-specific package for browser projects. - react-router-dom:
Choose this library for most professional web applications requiring robust routing features. It offers a complete ecosystem with nested routes, protected paths, and extensive documentation. The learning curve is reasonable, and community support is vast. It is the industry standard for scaling React applications.
- wouter:
Opt for this solution when bundle size is a critical constraint or when using Preact. It provides a hooks-first API that feels very natural in modern React code. The feature set is smaller, so ensure it meets your specific needs before committing. It excels in side projects or lightweight micro-frontends.
Popular Comparisons
README for @reach/router
Next Generation Routing for React
Documentation
You can also find the docs in the website directory.
Community
Legal
MIT License Copyright (c) 2018-present, Ryan Florence