How to Redirect to Another Page in ReactJS ?

Last Updated : 06 May, 2025

In ReactJS, when you need to move users from one page to another, we can use the built-in React Router library, which is designed specifically for handling navigation within a React application.

Approach

Use the Navigate component: In React Router v6, the Navigate component helps us to redirect users from one route to another easily. It's declarative, meaning we can set up redirects directly within your component.
Declarative Redirection: We can handle redirection directly in the component's render logic, making it straightforward and easy to understand.
Use useNavigate for Programmatic Navigation: For more control, we can use the useNavigate hook to redirect users based on specific actions or conditions (like form submissions or state changes). This enables dynamic navigation in your app.

Steps To Redirect to Another Page

Step 1: Create a basic react app using the following command.

npm create-react-app myreactapp
cd myreactapp

Step 2: Install the required dependencies using the following command.

npm i react-router-dom

Project Structure: After creating components, the project structure will look like this

Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
}

Now let's understand this with the help of example:

App.js

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

function App() {
    return (
        <>
            <Router>
                <Routes>
                    <Route
                        exact
                        path="/"
                        element={<Home />}
                    />
                    <Route
                        path="/about"
                        element={<About />}
                    />
                    <Route
                        path="/contactus"
                        element={<ContactUs />}
                    />
                    <Route
                        path="*"
                        element={<Navigate to="/" />}
                    />
                </Routes>
            </Router>
        </>
    );
}

export default App;

Home.js

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

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

export default Home;

About.js

import React from "react";

const About = () => {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    );
};

export default About;

ContactUs.js

import React from "react";

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

export default ContactUs;

Output

In this example

Sets up routing using React Router.
Defines routes for Home, About, and Contact Us pages.
Redirects to the Home page if the route doesn’t match any defined paths.
Displays navigation links to the Home, About, and Contact Us pages.
Displays "About Page" heading when the /about route is visited.
Displays "Contact Us Page" heading when the /contactus route is visited.

Methods to Redirect in ReactJS

The most common way to navigate between pages in React is by using the <Link> component provided by React Router. This component works similarly to an anchor (<a>) tag in regular HTML but prevents a full page reload.

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

About.js

import React from 'react';

const About = () => {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    );
};

export default About;

Home.js

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

const Home = () => {
    return (
        <div>
            <h1>Home Page</h1>
            <Link to="/about">Go to About Page</Link>
        </div>
    );
};

export default Home;

Output

In this example

Uses React Router to navigate between Home and About pages without page reloads.
In app component, we sets up routing with React Router for Home (/) and About (/about) pages.
About Component displays "About Page" when navigating to /about.
Home Component displays "Home Page" and a link to the About Page.

When navigation needs to happen based on specific conditions or actions, like submitting a form or completing an event, it’s called programmatic navigation. React Router provides the useNavigate() hook to handle this. It allows redirecting users to another page automatically without requiring a link or button click.

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

Home.js

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

const Home = () => {
    const navigate = useNavigate();

    const handleRedirect = () => {
        navigate('/about'); 
    };

    return (
        <div>
            <h1>Home Page</h1>
            <button onClick={handleRedirect}>Go to About Page</button>
        </div>
    );
};

export default Home;

About.js

import React from 'react';

const About = () => {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    );
};

export default About;

Output

In this example

App.js: Sets up routing using BrowserRouter and Routes and defines two routes: / for Home and /about for About.
Home.js: Displays a "Home Page" heading. Has a button that, when clicked, uses useNavigate() to redirect to /about.
About.js: Displays a "About Page" heading.

3. Redirecting After an Event or Action (Using useEffect)

Redirecting can happen after an action is completed, like submitting a form or finishing a task. To do this, the useEffect hook can be used along with useNavigate() to automatically redirect to another page once the action is done.

App.js

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

const LoginPage = () => {
  const isLoggedIn = false; 

  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
};

export default LoginPage;

FormPage.js

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const FormPage = () => {
    const [formData, setFormData] = useState('');
    const navigate = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault();
        setFormData('Form Submitted');
    };
    useEffect(() => {
        if (formData) {
            navigate('/thank-you');
        }
    }, [formData, navigate]);

    return (
        <div>
            <h1>Form Page</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="Enter something" />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

export default FormPage;

ThankYouPage.js

import React from 'react';
const ThankYouPage = () => {
    return (
        <div>
            <h1>Thank You for Submitting the Form!</h1>
        </div>
    );
};
export default ThankYouPage;

Output

In this example,

LoginPage: Redirects to /login if not logged in, otherwise shows dashboard.
FormPage: User submits a form, then redirects to /thank-you.
ThankYouPage: Displays a thank-you message after form submission.

Conclusion

In ReactJS, navigating between pages is essential for building interactive apps, and React Router simplifies this process. We can handle navigation in several ways: using the <Navigate> component for declarative redirection, the useNavigate hook for programmatic navigation based on actions or conditions, and useEffect to redirect after events like form submissions.

How to Redirect to Another Page in ReactJS ?

asmitsirohi

Improve

Article Tags :

How to Redirect to Another Page in ReactJS ?

Approach

Steps To Redirect to Another Page

Step 1: Create a basic react app using the following command.

Step 2: Install the required dependencies using the following command.

Methods to Redirect in ReactJS

1. Using <Link> for Navigation

2. Programmatic Navigation Using useNavigate()

3. Redirecting After an Event or Action (Using useEffect)

Conclusion

Similar Reads

How to Redirect to Another Page in ReactJS ?

Approach

Steps To Redirect to Another Page

Step 1: Create a basic react app using the following command.

Step 2: Install the required dependencies using the following command.

Methods to Redirect in ReactJS

1. Using <Link> for Navigation

2. Programmatic Navigation Using useNavigate()

3. Redirecting After an Event or Action (Using useEffect)

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?