Upgrade to React Router v6

This straightforward guide outlines the major changes between React Router v5 and v6. A detailed explanation of changes can be found on React Router’s website. This guide assumes the reader has a basic understanding of React.js and React Router v5.

1: Installation

Install the dependencies for React Router using a package manager, such as npm. Replace dom@5 with dom@6.

$ npm install react-router-dom@6

2: Removal of ReactDOM — React 18 Requirement

With the release of React v18 on March 29, 2022, ReactDOM.render is no longer supported.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

The React docs outline a solution to this by replacing ReactDOM with createRoot and to toggle Strict Mode if there are any issues.

import React, {StrictMode} from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import App from './components/App';
const root = createRoot(document.getElementById('root'));
root.render(  
  <StrictMode>
    <Router>
      <App />
    </Router>,
  </StrictMode>
);

3: <Switch> Becomes <Routes>

React Router v6 replaces Switch with a Routes component. There are many benefits of this upgrade including:

• All links are relative.
• Routes can be placed in any order and are selected based on the best route/match.
• Nested routes do not have to be in different components and can be “nested” under the main Route. Change 4.
• Props can be passed directly without ‘passProps’. Change 5.

React Router v5

React Router v6

4. Nested Routes

Routes can be directly nested when wrapped in <Route>…</Route>.

<Route path='movies' element={Movies />}>
  <Route path='favorites' element={<FavoriteMovies />} />
  <Route path='watchlist' element={<MoviesToWatch />} />
</Route>

Below are some valid route paths in v6:

/movies
/movies/favorites
/users/:id
/users/:id/messages
/files/*
/files/:id/*

5. Direct Passing of Props to Route Elements

As stated above, props can be directly passed to an element.

<Route path='/movies/' element={<Movies title={pageTitle} />} />

6: Discontinuation of ‘exact’ Prop

You will notice in the example above that <Home /> path is missing the exact prop. In v6, routes are relative and match exactly by default. All routes that would have used exact before can be omitted. In places where <NavLink exact> was used, exact should be replaced with end (<NavLink end>).

7: useHistory Becomes useNavigate

The useHistory hook has been replaced with useNavigate.

import { useNavigate } from 'react-router-dom';

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  }
  
  return (
    <div>
      <button onClick={handleClick}>Home Page</button>
    </div>
  );
}

8. Redirect Becomes Navigate

Regular <Redirect> elements should become <Navigate> elements in v6.

import { Navigate } from 'react-router-dom';

function App() {
  return <Navigate to='/home' />;
}

9. Removal of the activeClassName and activeStyle Props from NavLink

Both the activeClassName and activeStyle props have been discontinued in v6. Instead, a function can be passed to either className or style to handle a link being active.

<NavLink 
  style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}
>Messages</NavLink>

Thank-you for reading. What do you think of React v6? Leave your comments below!