Hi guys🖐️,

Routing is an essential technique for navigation among pages on a website based on user requests and actions. A separate library named React Router enables routing in React applications and allows defining of multiple routes in an application😳.

As a software developer, there will be situations where one of our core libraries has released its new version🤓. And all the methods and function that we used to code is changed. Unless you are one of those developers who keeps updates on all the libraries regularly, you’ll be trippin🙃.

One such library in the ReactJS world is React Router Dom v6.

---

What Is React Router?🤓

React Router is an npm package that enable developers to implement dynamic routes. Allow us to render pages and allow users to navigate➡️ them. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

---

Why Is React Router Needed?🤷‍♀️

React is famous for building single-page applications. Although it is one of the best solutions for building websites, React does not include many advanced features or routing by default.

Therefore, React Router is an excellent choice of navigation for these single-page applications to render multiple views🙋‍♀️.

---

React Router Dom v6?🥳

So React Router V6 was released and it has many new and interesting features.

Let's look into some of these new upgrades.

Goodbye Switch!

Previously, we used the <Switch> component to wrap all of our Routes, now the Switch component has been replaced by <Routes>. It is essentially the same thing as a switch.

Route Changes

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

Changes to the Route Component

1 - No need for 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 for 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 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.

V5 vs V6 code example:

The above-mentioned upgrades are demonstrated in the comparison below.

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>
  );
}

These are some of the routing-related upgrades.

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.

I hope you found some new information regarding the changes in react router v6.

Thank you for reading!...🤗