Routing in React using React Router v6

In this article, we will teach you how to implement Routing in React using React Router v6 (Version 6). We have already written an article to implement routing in React but it is in the version 5. So today we decided to upgrade the routing example with react-router-dom v6.

Checkout more articles on ReactJS

• How to use async/await in Loops
• How to use componentWillUnmount() in React Hooks
• Create a tags input component in React
• Barcode scanner in React
• Implement server side pagination in React AG Grid

Demo Application

Here, the output will be the same as compared to v5.

Output - Routing in React using React Router v6 - Clue Mediator

We will recommend you to read the following article:
What’s new in React Router v6

Package Version

react

^16.9.0

react-router-dom

^6.3.0

Implement routing in React using React Router v6

1. Clone routing application
2. Upgrade the routing package
3. Update the require changes
4. Output

1. Clone routing application

As we mentioned earlier, we will use the old example which is formed in React Router Version 5. You can check the router version in `package.json`.

Refer the following article:
Routing in React JS

2. Upgrade the routing package

Let’s upgrade the `react-router-dom` package by running the following command.

npm i react-router-dom

You will see the version 6 in the `package.json`.

3. Update the require changes

1st Change:

You won't be able to use `<Switch>` in the new version, but `<Routes>` will be available instead.

index.js

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

const routing = (
    ...
    ...
    <routes>
      ...
      ...
    </routes>
)

2nd Change:

We must now use the `element` to load the component instead of the `component`, and it is quite simple to send external props to the component directly.

Remove the `exact` prop as well, as they are no longer required in the current version.

index.js

const routing = (
  ...
  ...
  <routes>
    <route path="/" element="{<App">} />
    <route path="/about" element="{<About">} />
    <route path="/contact" element="{<Contact">} />
  </route></route></route></routes>
  ...
  ...
)

4. Output

Let's put everything together and see how it looks.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import App from './App';
import About from './About';
import Contact from './Contact';

const routing = (
  <browserrouter>
    <div>
      <h3>Clue Mediator</h3>
      <ul>
        <li>
          <link to="/">Home
        </li>
        <li>
          <link to="/about">About
        </li>
        <li>
          <link to="/contact">Contact
        </li>
      </ul>
      <routes>
        <route exact="" path="/" element="{<App">} />
        <route path="/about" element="{<About">} />
        <route path="/contact" element="{<Contact">} />
      </route></route></route></routes>
    </div>
  </browserrouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository