React Router v5 vs v6: Key Differences and When to Use Each

React Router v6 introduces a simpler, more intuitive API with nested routes and route matching improvements over v5. It replaces Switch with Routes, uses element props instead of render or component, and supports route ranking for better matching.

Quick Comparison

Here is a quick side-by-side comparison of React Router v5 and v6 key features and changes.

Feature	React Router v5	React Router v6
Route Matching	First match wins, order matters	Route ranking with best match wins
Route Wrapper	Switch component	Routes component
Route Rendering	component, render, or children props	Only element prop with JSX
Nested Routes	Manual nesting with Route inside components	Declarative nested routes inside Routes
Hooks	Basic hooks like useHistory, useLocation	New hooks like useNavigate, improved useRoutes
Redirects	<Redirect> component	<Navigate> component

Key Differences

React Router v6 simplifies routing by introducing the Routes component, which replaces Switch from v5. This new component uses route ranking to pick the best match instead of relying on the order of routes, making route matching more predictable and less error-prone.

In v6, the way you render routes changes significantly. Instead of using component or render props, you now use the element prop that takes JSX directly. This makes route definitions cleaner and more consistent with React's declarative style.

Nested routes are easier and more powerful in v6. You can declare nested routes inside the Routes component, and the router automatically handles rendering child routes. Also, new hooks like useNavigate replace older ones like useHistory, providing a simpler API for navigation.

Code Comparison

jsx

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" render={() => <About />} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

Output

A navigation bar with links 'Home' and 'About'. Clicking 'Home' shows 'Home Page'. Clicking 'About' shows 'About Page'. Any unknown URL redirects to 'Home Page'.

React Router v6 Equivalent

jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Router>
  );
}

Output

A navigation bar with links 'Home' and 'About'. Clicking 'Home' shows 'Home Page'. Clicking 'About' shows 'About Page'. Any unknown URL redirects to 'Home Page'.

When to Use Which

Choose React Router v6 for new projects because it offers a cleaner, more intuitive API with better route matching and nested route support. It aligns well with modern React patterns and simplifies navigation with improved hooks.

Use React Router v5 if you maintain legacy projects or depend on features not yet fully supported in v6, but plan to upgrade when possible to benefit from the improvements.

Key Takeaways

React Router v6 uses Routes and element props for cleaner routing.

Route matching in v6 is smarter with ranking, not just first match wins.

Nested routes are easier and more declarative in v6.

v6 replaces Redirect with Navigate and useHistory with useNavigate.

Prefer v6 for new apps; use v5 only for legacy support.