react-router VS wouter

Recently, I was working on a React Router v7 application where I needed to display a toast notification after a (un)successful form submission. Naturally, I used an action to return the submission status and utilized it inside a useEffect to trigger the toast. Here's what my initial code looked like:

+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router' export const InteractiveDemo = () => { return ( + // Hack to nest MemoryRouter inside BrowserRouter. + // https://github.com/remix-run/react-router/issues/7375 + + + + ) }

A simple React, Vite, and react-router setup can go a long way.

Now, I'm not saying it's the only option. Remix is still awesome for full-stack apps, and there's this new kid on the block called Tanstack Start that's doing some cool things so make sure to keep an eye out. And hey, if you just need routing, React Router V7 was recently launched.

The standard for handling navigation in React apps. It allows you to handle navigation between different components and pages seamlessly. 🔗reactrouter.com

react-router adds about 30 kB (minified) to your bundle, while wouter requires less than 4 kB. Although the react-router team has made significant efforts in version 7 to optimize its bundle size, it still feels excessive if your primary task is simply switching between a few routes.

react-router-dom: Enables client side routing.

React Router Documentation

wouter is a replacement for react-router. Not only is it smaller in the bundle, but doing SSR with it is much easier.

react-router adds about 30 kB (minified) to your bundle, while wouter requires less than 4 kB. Although the react-router team has made significant efforts in version 7 to optimize its bundle size, it still feels excessive if your primary task is simply switching between a few routes.

Wouter is a well-maintained routing library for React. It has minimal dependencies, is small (2.1 KB gzipped), and has the same basic components as React Router (Link, Switch, Redirect). It provides hooks for the location, the route, and the router, and the API is simple.

We're using wouter with great success. It's simple and effective for what we need from a router

If you feel like React Router is a bit too over-engineered and you just need simple routing, you can have a look at https://github.com/molefrog/wouter

I changed over to using wouter instead of react-router, and I love it!