Migration Guide

React Router Migration Guide

Node.js 16 or higher installed

Backup your current codebase

Review the changelog for breaking changes

All routes render correctly

Navigation between pages works

URL parameters are parsed correctly

Protected routes still function

You can use the codemod tool to automate most of these changes: npx react-router-upgrade

A step-by-step guide to upgrading your application

npm install react-router-dom@6

First, update react-router-dom to version 6.

// Before <Route path="/users" component={Users} /> // After <Route path="/users" element={<Users />} />

Replace all Switch components with Routes and update Route syntax.

// Before const history = useHistory(); history.push('/dashboard'); // After const navigate = useNavigate(); navigate('/dashboard');

Replace useHistory with useNavigate throughout your codebase.

6.0

Update dependencies

Update Route components

Update navigation hooks

5.x

<Routes><Route path="/" element={<Home />} /></Routes>

<Switch><Route path="/" component={Home} /></Switch>

const navigate = useNavigate(); navigate('/home');

const history = useHistory(); history.push('/home');

Make sure to wrap your route elements in JSX tags when using the element prop.

The Switch component has been replaced with Routes.

The useHistory hook has been replaced with useNavigate.

Switch component replaced

useHistory replaced with useNavigate