A simple introduction to React Router Dom v6

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.

Sure you will get all the required details when you dig deep into the official documentation. But this article will serve you as a cheat sheet and avoid the “dig deep” part.

What is React Router Dom v6?

React Router Dom is a part of React router library, which provides routing functionality to ReactJS applications on the web. For a long time, this library is the one-stop solution for routing in ReactJS. A year back the latest version of React Router Dom was released (version 6).

This version is one of the major releases and includes a lot of performance optimization and functionality inclusion. Without further delay let’s dive in.

Installation:

To install the library run the following command in your root folder of the ReactJS application.

npm i react-router-dom@6.3.0

At the point of writing this article, the latest version was 6.3.0. But most possibly, this should serve as a reference for the whole version 6 release.

1. Basic router declaration

React Router Dom v6 - router declaration
React Router Dom v6- router declaration

The basic router declaration is mostly similar to the previous version. The only difference being the “component” props in the Route tag is changed to “element”.

2. Link component

React Router Dom v6 - link component
React Router Dom v6 – link component

No changes in the link component. And if there are parameters to be sent to the target route then refer to the below code.

3. Link component with query params

The below code is for redirecting to a route with query params and how we can get the query param value inside our component.

React Router Dom v6 - routing with query params
React Router Dom v6 – routing with query params

In the above code, we navigate to page 2 with the query param name.

React Router Dom v6 - get query params
React Router Dom v6 – get query params

On page 2, we can get the query param using the useSearchParams hook from React Router Dom. searchParams.get(‘name’) will give us the value of the name param.

4. Link component with URL params

In this application, page 3 has the id URL parameter. Let’s see how can we send and get this.

React Router Dom v6 - navigate with URL params
React Router Dom v6 – navigate with URL params

In the above code, we send the id param value 123 to page3.

React Router Dom v6 - get URL params
React Router Dom v6 – get URL params

The useParams hook is used to get the URL params inside a component. The params.id will give us the sent id.

5. Navigate programmatically inside the component

Now, the link tag is used to navigate to another component with a link tag, but what if we need to navigate after some action is performed say after an API call. For this, we have useNavigate hook to navigate to another route programmatically inside a component.

React Router Dom v6 - navigate programmatically
React Router Dom v6 – navigate programmatically

Here, we have a button click action that navigates to page 1 on click.

6. Go back to the previous page

There is also an option to go back to the previous page from the current router using the useNavigate hook.

React Router Dom v6 - go back to the previous router
React Router Dom v6 – go back to the previous router

Here, navigate(-1) will go to the previous router from which the current router came from. All the history is stored in the BrowserRouter component from React Router Dom.

7. Nested Routing

Nested routing is one of the most critical features if the application is large and complex. The below code shows how we can achieve nested routing using React Router Dom.

React Router Dom v6 - nested routing declaration
React Router Dom v6 – nested routing declaration

In the above code, nestedPage/* says the application to match nestedPage/(whatever). Then all the routers which come under the nestedPage component are declared within the component. Refer to the below code.

React Router Dom v6 - nested routing route declaration
React Router Dom v6 – nested routing route declaration

Here, the Outlet tag is where all your nested components will render(in this case Page1 and Page2 will be the nested components). Rest is the router declaration, which is similar to that of the App.js file.

Now the router path for Page1 and Page2 will be <url>/nestedPage/page1 and <url>/nestedPage/page2.

If you want to learn more about nested routing in detail, do check this fantastic article on React Router 6: Nested Routes

8. Protected routers

When we build a web application, it is necessary to restrict some routers say before logging in. Refer to the below code to do that.

React Router Dom v6 - Protected router declaration
React Router Dom v6 – Protected router declaration

Here, the isAuthenticated variable contains the condition to check if the router has passed the authentication check or not. if yes, then the desired router is rendered or the control is redirected to the root router(Page1).

And, below is the code on how we can restrict a particular router based on the above logic.

React Router Dom v6 - protected router usage
React Router Dom v6- protected router usage

Here, we can see that the required router is wrapped around the ProtectedRoute component.

Final thoughts

This article is just a basic introduction to React Router Dom V6 there are a lot more things that you can do with this library. But, these are the most basic features required to build a ReactJS application whether it is a small project or a large complex one.

Happy coding!!

Looking for a detailed migration guide from React Router V5 to React Router V6? check the article on How to upgrade React Router v5 to v6.

Related articles

A simple introduction to ReactJS.

React Redux tutorial.

2 thoughts on “A simple introduction to React Router Dom v6

  1. Wonderful beat ! I wish to apprentice while you amend your site, how could i subscribe for a
    blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  2. Itís difficult to find educated people about this topic, but you seem like you know what youíre talking about! Thanks

Leave a Reply

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

Pin It on Pinterest