React Router v6: What’s New and How to Upgrade

React Router, the de-facto routing solution for React applications, has evolved significantly with its version 6 release. Let’s explore the exciting changes and learn how to upgrade your existing applications to leverage these new features.

The Evolution of React Router

The journey from React Router v5 to v6 brings substantial improvements in terms of bundle size, simplicity, and developer experience. The new version is more intuitive while maintaining the flexibility we’ve come to love.

Key Changes in v6

1. Simplified Route Components

The most noticeable change in v6 is the streamlined Route component. The component prop has been replaced with element, making the syntax more consistent with standard React:

// Old v5 way
<Route path="/users" component={Users} />

// New v6 way
<Route path="/users" element={<Users />} />

2. Automatic Route Ranking

One of the most exciting features is the automatic route ranking system. No more manual route ordering! React Router v6 now automatically ranks and matches routes based on specificity:

<Routes>
  <Route path="/users/*" element={<Users />} />
  <Route path="/users/new" element={<NewUser />} />
</Routes>

3. Hooks-First API

The new version embraces hooks completely, introducing powerful new ones like useNavigate and useRoutes:

// Old v5 way
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/home');

// New v6 way
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

Upgrading Guide

1. Update your dependencies:

npm install react-router-dom@6

2. Replace Switch with Routes:

// Old
import { Switch, Route } from 'react-router-dom';
<Switch>
  <Route />
</Switch>

// New
import { Routes, Route } from 'react-router-dom';
<Routes>
  <Route />
</Routes>

3. Update your route definitions with the element prop.
4. Replace useHistory with useNavigate.
5. Update any nested routes to use relative paths.

Conclusion

React Router v6 represents a significant step forward in the React ecosystem. While the upgrade process might require some initial work, the benefits in terms of code clarity, bundle size, and developer experience make it well worth the effort.