Skip to main content
Version: 2.x

Upgrading From React Router v5 to v6

This guide will help you upgrade your UI Customizer application from React Router v5 to v6. React Router v6 is a major update that introduces several breaking changes. This guide will help you understand the changes and provide you with the necessary steps to upgrade your application.

Prerequisites​

  • Node.js version 20 or above (which can be checked by running node -v).

Install​

To upgrade your application to React Router v6, you need to install the latest version of React Router. You can do this by running the following command:

# NPM
npm install react-router-dom@6

# Yarn
yarn add react-router-dom@6

# PNPM
pnpm add react-router-dom@6

Changes in React Router v6​

1. Route Component Changes​

  • The component prop is replaced with element in v6.
  • Replace component with element in your <Route> components.
  • Also element prop should be passed with JSX element.
  • exact prop is removed in v6.

Before (v5):

Before (v5)
<Route path="/" component={Home} />
<Route path="/component" render={(props) => <DataVizComponent />} />

After (v6):

After (v6)
<Route path="/" element={<Home />} />
<Route path="/component" element={<Contact />} />

2. Switch Replaced by Routes​

  • Switch is replaced with Routes in v6.
  • Replace Switch with Routes and wrap your <Route> components with it.

Before (v5):

Before (v5)
import { Switch, Route } from "react-router-dom";

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

After (v6):

After (v6)
import { Routes, Route } from "react-router-dom";

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

3. Nested Routes​

  • In v6, nested routes are defined inside parent routes using <Routes>.

Before (v5):

Before (v5)
<Route path="/home" component={Home}>
  <Route path="/profile" component={Profile} />
</Route>

After (v6):

After (v6)
<Route path="/home" element={<About />}>
  <Route path="profile" element={<Profile />} />
</Route>
  • Note: Child paths are now relative (no / at the start).

4. useNavigate Replaces useHistory​

  • In v6, useNavigate replaces useHistory for navigation.

Before (v5):

Before (v5)
import { useHistory } from "react-router-dom";

const history = useHistory();

history.push("/home");

After (v6):

After (v6)
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/home");

5. Redirection with Navigate​

  • In v6, redirection is done using the Navigate component.

Before (v5):

Before (v5)
import { Redirect } from "react-router-dom";

<Redirect to="/home" />

After (v6):

After (v6)

<Navigate to="/home" />

6. Access Params with useParams​

  • In v6, you can access URL parameters using the useParams hook.

Before (v5):

Before (v5)
import { useParams } from "react-router-dom";

<Route path="/home" render={(props) => <Home id={props.match.params.id}>}>

After (v6):

After (v6)
import { useParams } from "react-router-dom";

const { id } = useParams();

<Route path="/home" element={<Home id={id} />} />

7. Outlet for Rendering Nested Routes​

  • In v6, use the Outlet component to render nested routes.
After (v6)
import { Outlet } from "react-router-dom";

const DataVizDashboard = () => {
  return (
    <div>
      <h1>Data VIZ</h1>
      <Outlet />
    </div>
  );
};

Resources​