How to redirect to another page in ReactJS

Share the post

Hello All, In this React JS tutorial, We will learn How to redirect to another page in ReactJS. In the past React JS tutorial, We had discussed How to format Date in React JS.

In this tutorial, We will discuss the steps required to redirect to another page in React JS. How the navigation happens in ReactJS. We will install react-router-dom one npm dependency for it, Which will handle the navigation in ReactJS. We will see one example to get information about redirection in ReactJS.

So, Let’s Start…

Table of Contents

Steps Required for How to redirect to another page in ReactJS

Create a New React Project
Install NPM dependency
Create components ( Home, About Us, Contact Us )
Update App.js
Run React JS Application

Step 1: Create a new React Project

We need to create a new React Project. Use the below command to create a new project in React JS

npx create-react-app myapp

Now, go to our project path

cd myapp

We will open this project in Visual Studio Code editor using the below command.

code .

Step2: Install NPM dependency

Now, We will install react-router-dom using the below command

npm i react-router-dom

Step3: Create components ( Home, About Us, Contact Us )

We will create a components folder in the root folder. Now, We will create three pages that are commonly seen on any website. Create JSX file for Home, About Us & Contact Us.

Home.jsx

import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
    return (
        <div>
            <h1>Home Page</h1>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/aboutus">About Us</Link>
                </li>
                <li>
                    <Link to="/contactus">Contact Us</Link>
                </li>
            </ul>
        </div>
    );
};

export default Home;

AboutUs.jsx

import React from "react";

const AboutUs = () => {
    return (
        <div>
            <h1>This is About Us Page</h1>
        </div>
    );
};

export default AboutUs;

ContactUs.jsx

import React from "react";

const ContactUs = () => {
    return (
        <div>
            <h1>This is Contact Us Page</h1>
        </div>
    );
};

export default ContactUs;

Step4: Update App.js

Now, We will write the logic for redirection in App.js, but before we write the logic for redirection first we need to understand what is the use of react-router-dom?. What is Route & Link?

What is react-router-dom?

This package contains bindings for routing web applications.

What is BrowserRouter?

It Used to handle dynamic URL

What is Route?

It will take the help of a specific path & render the component.

What is Link?

We can redirect the page without reloading the page. It will navigate the page with the help of the URL.

App.js

import {
  BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import Home from "./components/Home";
import AboutUs from "./components/AboutUs";
import ContactUs from "./components/ContactUs";
import "./App.css";

export default function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/aboutus" element={<AboutUs />} />
          <Route path="/contactus" element={<ContactUs />} />
        </Routes>
      </Router>
    </>
  );
}

Step5: Run React JS Application

We will run the ReactJS application using the below command

npm run start

Output