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.

Demo Application

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

Output - Routing in React using React Router v6 - Clue Mediator
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

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.

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

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

4. Output

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

index.js

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
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *