react-router VS Router5

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

Router5