Wouter: A Minimalist Alternative to React Router
Although React Router is currently the most popular routing solution for building applications with React, there are some people who feel that the library has too many features that aren’t used for smaller applications.
For example, the React Router library has support for hash-based routing and memory routing, which is not going to be used when your app only needs browser-based routing.
Wouter is a minimalist routing library that implements only the most used functionality from React Router. It also targets only the most recent environment, which is React v16.8.0+ and ES6-compliant browsers to further reduce the bundle size.
When compared to React Router, Wouter has the following benefits:
- Tiny and has no dependencies. Only 1 KB (1308 bytes) gzipped in size, while React Router is 11 KB
- No mandatory top-level wrapper with
<Router/>component - Mimics React Router’s best practice so it will be very familiar to React Router users.
- Supports both React and Preact library
But of course, Wouter also has some drawbacks when compared to React Router:
- No support for React Native
- No support for MemoryRouter and HashRouter
- No extended functions to support routing like
matchPath
Wouter provides a simple API that many developers and library authors appreciate. Some notable projects that use Wouter include:
Tip: Share reusable components between projects using Bit.
Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Learn more:
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Getting started with Wouter
To start using Wouter, you just need to install the package using your favorite package manager:
npm install wouter# oryarn add wouter
Then, you could immediately start implementing the router. Import both <Link> and <Route> component from the wouter package, then create a Link with href prop and a Route component with the matching path:
import React from 'react';
import { Link, Route } from "wouter";
const App = () => (
<div>
<h1>Application</h1>
<Link href="/users/JohnDoe">
<a className="link">Profile</a>
</Link> <Route path="/users/:username">
{(params) => <div>Hello, {params.username}!</div>}
</Route>
</div>
);export default App;
You can view a working example here:
The Route component’s children will be rendered when the browser URL matches the path prop passed into it.
Let’s take a look at the full list of Wouter’s API.
Wouter hooks API
Wouter has 3 hooks that are easy to use. First, the useRoute hook is used to determine if the current browser URL matches the provided path:
import { useRoute } from "wouter";const UserRoute = () => {
// `match` is boolean
const [match, params] = useRoute("/users/:username"); if(match){
return <div>Hello, {params.username}!</div>
}
return null
};
The hook can be used to replace theRoute component. Here is an example of useRoute in action:
Next, the useLocation hook is a wrapper around the native browser history API. It allows you to manipulate the current browser location:
import { useLocation } from "wouter";
const CurrentLocation = () => {
const [location, setLocation] = useLocation();
return (
<div>
{`The current page is: ${location}`}
<a onClick={() => setLocation("/somewhere")}>Click to update</a>
</div>
);
};Here is an example of useLocation hook in action:
The last hook is useRouter hook, which returns a global router object. This hook may be needed when you use the top-level Router component (when you need a custom base path, a custom matcher, or a hash-based routing).
Here is an example of calling the useRouter hook:
Let’s take a look at Wouter’s component API next.
Wouter component API
Wouter’s component-based API is similar to React Router’s but much simpler. The <Route> component is used for conditionally rendering a component when the current route matches its path pattern, as you’ve seen before:
<Route path="/users/:username">
{(params) => <div>Hello, {params.username}!</div>}
</Route>The <Link> component renders an anchor element <a> that allows you to navigate to the route specified in its href prop. If you need to customize the style of the anchor element, You can add your own <a> element as its children component:
<Link href="/foo">Hello!</Link>Next, the <Switch> component will render only the first matching Route component and ignore the rest. In the example below, the /orders/:status route won’t be rendered when you navigate to /orders/all:
import { Route, Switch } from "wouter";
<Switch>
<Route path="/orders/all" component={AllOrders} />
<Route path="/orders/:status" component={Orders} />
</Switch>;Here’s an example of the <Switch> component in action:
And then there’s the <Redirect> component that will redirect your users to the path provided on its prop:
import { Redirect } from "wouter";
const User = ({ username }) => {
if (username !== 'John') return <Redirect to="/" />;
return <div> Current User is {userId} </div>;
};Here’s an example of a redirect in action:
Finally, Wouter also has the <Router> component, which is an optional top-level component that you can use for building an advanced routing configuration.
You can pass a custom base path, a custom matcher, or a custom location hook into this component:
import { Router, Route, Link } from "wouter";
const App = () => (
<Router base="/app">
{/* the link's href attribute will be "/app/users" */}
<Link href="/users">Users</Link>
<Route path="/users">The current path is /app/users!</Route>
</Router>
);For more detail on its use, check out the example of customizing Wouter’s location hook.
Conclusion
Wouter is a great tiny routing solution when building apps with React. The creator also recommends looking into the source code to learn how you can build a good open-source library using React hooks.
But it’s not recommended to replace React Router with it for several reasons:
- There is no migration path from React Router to Wouter. The library mimics, but not fully implement React Router’s API.
- Wouter is perfect for pet projects, hackathon projects, small apps with <10 routes. It’s not suitable for complex apps.
- Wouter has no documentation or community support at the moment. All information for the library is found on the GitHub page README.
There are so many things that were intentionally left out from Wouter during the design phase: such as complex path matchers, redirects, switches, React Native support, etc.
In short, if you only require links and routes, then Wouter will be an excellent choice for your React project. But if you need extended routing support, then it’s better to use React Router.
