Wouter: Easy Routing For React and Preact Developers

Tired of complex routing in your React or Preact apps? If setting up routes feels like a chore, Wouter might be just what you need. It’s a lightweight routing library with a small footprint and an easy-to-use API. Wouter keeps things simple without sacrificing functionality.

One standout feature is its support for default routes. When no matching route is found, Wouter falls back to a defined default, giving you more control over routing behavior.

This article covers Wouter’s features, benefits, and practical use cases. It also explains the role of the global router object in advanced routing and how it helps manage routing options and matching functions.

What is Wouter?

Wouter is a minimalist routing library for React and Preact applications. It provides essential routing functionality with a small footprint, making it an excellent choice for developers who want a simple and efficient way to handle routing without the complexity of larger libraries like React Router. Compared to React Router's traditional component-based approach, Wouter offers a more flexible API that allows developers to choose between using React Hooks for custom routing or a more conventional navigation style with components that resemble React Router functionality.

Wouter’s intuitive and barebones API makes it easy to integrate into your projects, offering a straightforward approach to routing that aligns with modern development practices.

Why Choose Wouter?

Core Concepts

Wouter’s core concepts revolve around its use of Hooks and its internal router object. The library offers a range of Hooks, including useRoute, useLocation, useParams, and useSearch, which empower developers to build custom routing components and interact with the router object seamlessly. The internal router object is pivotal as it holds the routing configuration options, such as the base path, parser, and search hook, allowing for a high degree of customization to suit specific use cases. This flexibility makes Wouter a powerful tool for developers looking to create tailored routing solutions.

Minimalist Footprint

One of the standout features of Wouter is its minimalist footprint. With a size of only 1.5KB gzipped, Wouter is significantly smaller than other routing libraries like React Router, which can be up to 17KB. This makes Wouter an ideal choice for applications where performance and load times are critical. The library's small size is achieved by focusing on essential routing functionality and avoiding unnecessary bloat.

Intuitive API

Wouter offers an intuitive and barebones API that is easy to understand and use. The library provides a set of familiar components such as Link, Route, Switch, and Redirect, which mimic the best practices of React Router. This makes it straightforward for developers who are already familiar with React Router to transition to Wouter. The API is designed to be as simple as possible, allowing developers to build custom routing components and interactions with ease. Wouter provides a simple API that many developers and library authors appreciate, making it a popular choice for those seeking straightforward routing solutions.

Hook-Based Routing

Wouter embraces React Hooks, offering a hook-based API that provides greater control over routing. The library comes with two kinds of APIs: low-level React Hooks API and more traditional component-based API similar to React Router’s one. This allows developers to choose the approach that best fits their needs. The hook-based API is particularly useful for creating custom interactions such as route transitions or accessing the router directly. The useRoute, useLocation, and useRouter hooks are essential tools for managing routing in a more granular and controlled manner.

Additionally, strict routes supported can be implemented using custom matchers or parsers to handle trailing slashes, enhancing routing accuracy.

No Top-Level Router Component

Unlike React Router, Wouter does not require a top-level <Router /> component. This makes it easier to start writing your app without polluting it with a cascade of top-level providers. The internal router object is constructed on demand, providing flexibility in how you structure your application's routing. This optional top-level component is particularly useful for advanced routing configuration, such as custom matcher functions or base path support.

Support for Preact

Wouter supports both React and Preact, making it a versatile choice for developers who use either library. Preact is a tiny alternative to React with the same API, and Wouter's support for Preact ensures that developers can enjoy the benefits of minimalist routing regardless of their preferred framework. This makes Wouter an excellent choice for projects that prioritize performance and efficiency.

Getting Started with Wouter

To get started with Wouter, you can install it using npm or yarn:

1npm install wouter

Once installed, you can begin using Wouter's components and hooks to set up routing in your application. Here's a basic example of how to set up routing using Wouter:

1import { Link, Route } from "wouter";
2
3const App = () => (
4  <div>
5    <Link href="/users/1">
6      <a className="link">Profile</a>
7    </Link>
8    <Route path="/about">About Us</Route>
9    <Route path="/users/:name">
10      {(params) => <div>Hello, {params.name}!</div>}
11    </Route>
12    <Route path="/inbox" component={InboxPage} />
13  </div>
14);
15
16export default App;

This setup is very minimal compared to the boilerplate required by React Router, making it easier to get started with routing in your application.

Wouter Components

Route

The <Route /> component represents a part of the app that is rendered conditionally based on a specific pattern. The pattern is a string that can contain special characters to match dynamic segments. Wouter provides different ways to declare a route:

1import { Route } from "wouter";
2
3// Basic usage
4<Route path="/home"><Home /></Route>
5
6// Render-prop style usage
7<Route path="/profile/:id">
8  {params => <ProfilePage id={params.id} />}
9</Route>
10
11// Prop-based usage
12<Route path="/orders/:status" component={Orders} />

Link

The <Link /> component renders an anchor <a /> element that, on click, navigates to the route specified in the href prop. It can also be customized by providing a custom component as its children:

1import { Link } from "wouter";
2
3<Link href="/users/all" className="active">
4  List Users
5</Link>;
6
7<Link href="/users/all">
8  <CustomLink> List Users </CustomLink>
9</Link>;

Switch

The <Switch /> component is used for exclusive routing, ensuring that only one route is rendered at a time, even if the routes have patterns that overlap with each other:

1import { Route, Switch } from "wouter";
2
3<Switch>
4  <Route path="/users/all" component={AllUsers} />
5  <Route path="/users/:userId" component={User} />
6</Switch>;

Redirect

The <Redirect /> component is used to redirect the user to another route provided in the to prop. It uses the useLocation hook internally to trigger the navigation inside of the useEffect callback block:

1import { Redirect } from "wouter";
2
3const User = ({ userId }) => {
4  if (!userId) return <Redirect to="/login" />;
5
6  return <div> Current User is {userId} </div>
7};

Advanced Routing Configuration

Wouter allows for advanced routing configuration through the use of the <Router /> component. This optional top-level component can be used to customize the routing behavior, such as specifying a base path, custom matcher function, or custom location hook. Default routes can be used as fallback options in advanced routing configurations, ensuring controlled routing behavior when no matching route is found. The router object holds the routing configuration options, which can be accessed using the useRouter hook:

1import { Router, Route } from "wouter";
2
3const App = () => (
4  <Router base="/app">
5    <Route path="/users" component={UsersPage} />
6  </Router>
7);

Custom Routing Components

Wouter's hook-based API allows developers to build custom routing components tailored to their specific needs. By using hooks like useRoute, useLocation, and useRouter, developers can create custom interactions and route transitions that enhance the user experience. For example, you can create a custom route component that animates the transition between routes:

1import { useRoute } from "wouter";
2import { Transition } from "react-transition-group";
3
4const AnimatedRoute = () => {
5  const [match, params] = useRoute("/users/:id");
6
7  return (
8    <Transition in={match}>
9      <div>Hello, User ID: {params.id}</div>
10    </Transition>
11  );
12};

Wrapping Up with Wouter

Wouter makes routing in React and Preact simple and clean. Its small size and hook-based API keep things lightweight while still handling complex routing needs. Developers who care about performance and simplicity will appreciate how Wouter keeps things easy to manage. Whether it's a small project or a more advanced app, Wouter helps you handle routing without the extra hassle.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.