How to redirect to another page in ReactJS

By Rajat Kumar Dabas

In this tutorial, we will learn  "How to redirect to a single page or multiple pages in ReactJS ". Redirecting to another page is a common requirement in Web Applications.

In this tutorial, we will learn  "How to redirect to a single page or multiple pages in ReactJS ". Redirecting to another page is a common requirement in Web Applications. Let's dive into understanding the concept of redirecting to another page in ReactJS by exploring real-world examples. By examining practical scenarios, we can grasp the concept more effectively.

Redirect to another page in ReactJS

To redirect either between 1 page or multiple pages, React-Router is a useful library for handling navigation and redirecting between pages.
And useNavigate hook and Route tag of the React-Router-dom library is commonly used for Routing purposes.
Note:
React-router-native -> is used for mobile applications
React-router-DOM -> is used for web apps.
In this article, we will focus on React-Router-DOM i.e. routing in web applications.

Real-World Example of Routing

Netflix is a popular streaming platform that offers a wide variety of content across different genres like drama, comedy, action, anime, family, entertainment, and many more. Each genre represents a category with its collection of movies and TV shows.
When we visit Netflix, we see a homepage with different categories displayed. When we click on any category, it redirects us to a new page specifically dedicated to that category. This allows us to browse and explore the available options within that particular category. For this purpose, Routing is an efficient way to handle navigation in a multi-page application like Netflix.
For example, when we click on the "Action" category, the application navigates to a new URL like "netflix.com/action".

So, how can we redirect to another page in ReactJS?

Let’s see an example to understand it clearly.
Below I have mentioned 3 files: index.js, app.js and ContactUs.js.

Index.js

                           // File1 -> Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
  
  
);

The code snippet above acts as the foundation for our future codes in React App.
is a component in the react-router-dom library. It offers routing capability inside the application to move between pages. The App/> component is suited to handle routing because it is contained in BrowserRouter>.

App.js

                           // File 2 -> App.js
import { NavLink, Route } from 'react-router-dom';

function App() {
return (

 );
}

Routing and navigation inside a web application , will be handled here.
The Navigation link is made with the help of tag. It renders a link that , when clicked , navigates to the defined location. Since the link in this instance has "to = "/About" clicking it will take the user to the "/About" location.
To specify routes and connect them to specific rendering components, use the Route> element.

• 1st Route -> The index attribute specifies that it should be rendered when the application's URL matches the root ("/") path. Also ,“element=”inside Route component specifies that component will be rendered here .
• 2nd Route-> It has (to=”/About”) as path and (element=” ContactUs”) as a component to render when this route is accessed

On clicking the "Contact Us" link user will be navigated to the "/About" path and will render the component. When the root route ("/") is reached, "Home" component will be rendered by default.

ContactUs.js

                         // File3 -> ContactUs.js
import React from 'react'
import { Navigate, useNavigate } from 'react-router-dom'

const ContactUS = () => {
   const navigate = useNavigate();
   function clickHandler() {
   navigate("/About")
}
return (

  )
}
export default ContactUS

A clickHandler method inside the ContactUs component is used to handle button clicks.
This method/function has access to the navigate function thanks to the useNavigate hook in the react-router-dom package.
The navigate function redirects our page to a new location. On Clicking the "Move to ContactUs page" button , you will be redirected to the "/About" page.

Routing for multiple pages

Above we saw a typical single routing example and it’s working whenever the user click on a button in react app to move to a new URL.
Similarly, we can use routes for multi-page(or component) applications and can move between different components by clicking the required button in react app.
Note: For multiple route applications, all route should be enclosed inside Routes tag.
The tag is used to define a collection of routes. It serves as the top-level container for all the routes in the application.
Below is an example for defining multiple Route’s inside Routes tag.

  } />
  } />
  } />
  } />
  

React-Router-Dom has been really helpful for aiding us in solidifying our grasp of how to redirect to a different page inside a React application.