React Hook - Redirection (React Router DOM)

Redirection is one of the many basic features when it comes to developing a web application. React, by nature, does not have the feature but React Router DOM offers features to make the redirection availble. Let's see how we can use them

Creating a React Project

React

Setting Up Routing

React Library - React Router DOM

We implement the redirection on the About route

Using Redirection

1. Navigate

This is similar to the Link tag and we use 'to' attribute to specify the path to redirect to

 

Import the Navigate

import { Navigate } from 'react-router-dom'

Set up the path to redirect

<Navigate to={'/redirect'} />

Run the app and try to access the about page, then you will be redirected to the path you specified above

2. useNavigate

This is a hook to redirect. With this option, we need to initialize 

 

Inport the hook to the component and initialize

import { useNavigate } from 'react-router-dom'

User initialized variable to specify the path to redirect (Here I used a button to fire the hook)

Run the app and click the button.

Then you will be redirected to the path you specified above

In this writing, we have seen how to use the React router DOM to redirect.

---

References

Traversy Media - YouTube

Traversy Media