Skip to main content

React Router V6 - The Main Changes

Saleh is an experienced Web Developer and uses his knowledge and experience to guide people looking to learn Web Dev and new technologies

React Router V6

React Router V6

Introduction

Hi guys,

So recently, React Router V6 was released and it has many new and interesting features. In this article, we will look into the major upgrades that have been made to React Router.

Upgrading to V6

Use the following npm commands to upgrade React Router from v5 to v6.You'll also want to remove the history dependency from your package.json as it is no longer needed.

$ npm install react-router-dom@6

Goodbye Switch!

Previously, in React Router V6, we used the <Switch> component to wrap all of our Routes, now the the Switch component has been replaced by <Routes>. It is essentially the same thing as switch, however some new features have been added to the <Route> component it self.

Changes to the Route Component

There have been a couple of useful upgrades to the <Route> component.

1 - No need of exact.

In V5, you needed to put the exact prop on the component so that it goes to the particular route. However in V6, there is no need of this prop as React Router now always looks for the exact path without being told.

2 - Introducing the element prop

Previously, we used to pass the component in the Route as a child, or in other words, the component would be placed within the Route. In V6, this is no longer needed as you can simply pass the element prop in the route and place the component inside it. The pros of this are that you can simply inject whichever component one needs depending on its route rather than placing it in each route component.

Code examples:

The above mentioned upgrades are demonstrated in the comparison below.

Scroll to Continue

React Router V5 code:

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/page1">
          <Page1/>
        </Route>
        <Route exact path="/page2">
          <Page2/>
        </Route>
      </Switch>
    </div>
  )
}

React Router V6 code:

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/page1" element={<Page1/>} />
        <Route path="/page2" element={<Page2/>} />
      </Routes>
    </div>
  )
}

As you can see, 3 changes can be noticed in the above code comparison, Use of Routes instead of Switch, removal of exact and use of the element prop.

Introducing useNavigate

In V5, page navigation was done using the useHistory hook. This has now been replaced by a new navigation API called useNavigate. Essentially, it is the same thing however, it provides better compatibility with React suspense and also provides a smoother user experience.

Most of the changes are simply replacing useHistory with useNavigate and changing the history.push to navigate().

The differences are shown in the below examples

React Router V5 (useHistory)

// React Router v5
import { useHistory } from "react-router-dom";
 
function App() {
  let history = useHistory();
  function handleClick() {
    history.push("/page1");
  }
  return (
    <div>
      <button onClick={handleClick}>Page1</button>
    </div>
  );
}

React Router V6 (useNavigate)

//React Router v6 
import { useNavigate } from "react-router-dom";
 
function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/page1");
  }
  return (
    <div>
      <button onClick={handleClick}>Page 1</button>
    </div>
  );
}
Text

Conclusion

So these were the major changes and upgrades that have been added to React Router V6. There are a few more other than these, but the above mentioned ones were the more important and significant ones. These changes have not only improved the user experience and performance of Routing, but also made writing the code a tad bit easier for us Developers.

If I missed something, feel free to comment below.

Until next time

Cheer:)


Learn how to get started with React JS

Related Articles