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

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

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.