Upgrade to React Router 6

The objective of this article is to get you started with react-router-dom v6 (also referred to as React Router 6) by explaining how to upgrade an existing react project to the newest version of the official routing library.

There are two methods for upgrading from React Router v5 to v6: starting from scratch or updating an existing project to utilize React Router 6. Router v6 requires React v16.8+ since it makes use of React Hooks.

How to upgrade to React Router 6

React Router 6 is the most current version of the React 18 official routing library. When developing Single Page Applications (SPAs), client-side routing is needed to allow users to navigate across the UI of your React 18 application, which is often separated into many views or screens.

Using React Router 6, which we'll describe in this post, you can keep your application's UI and URL in sync.

As compared to prior versions, React Router v6 has a substantially smaller footprint. V5 and V6 are almost 60% different. This is a significant change.

In React Router v6, components may be included in routes and custom properties can be passed to components. In addition to nesting routes and using relative links, we have other options. Aside from making it easier to provide global data to components and props, this lets us avoid or minimize the definition of new routes inside multiple component files.

When redirecting instead of using useHistory, a new technique utilizing useNavigate has been designed to address the issue of redundant URLs.

To simplify our code, we may utilize NavLink to conditionally activate links. It would be redundant to pass two props for active and inactive states. This approach is simple to use to decide which style will be applied when a link becomes active or inactive.

The <Routes> component replaces the <Switch> component with extra features.

The <Route component> has been replaced with <Route element>.

As you will see in the following examples, we are now passing a react element rather than a component. This is considerably better since we can provide props straight to the element.

Upgrade React Router in an existing react project

React Router may be upgraded by opening a terminal and entering the project directory. Then, begin the upgrading process by running the following command:

npm install react-router-dom@latest

Understanding what has updated in React Router v6 will help us determine why it is essential to upgrade.

To help you decide which version of React Router to use, we'll go through the changes in React Router v5 with simple examples.

Let's presume you have the following code that uses react router 5 in your project:

import { BrowserRouter, Switch, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

You simply need to replace the Switch component with the Routes component and use the element property to pass the target component as follows:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

We also removed the exact prop since it's not needed anymore with react router 6 to match exact paths.

You can pass props directly to the element as follows:

<Route path="profile" element={<Profile isAdmin={true} />} />

Conclusion

React Router version 6 provides a host of important new features and improves compatibility with the latest versions of React. This release also includes breaking changes from version 5. This guide will walk you through the process of upgrading your app from version 4 or 5 to version 6.

• Date: 26 Apr 2022