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
Folder structureDependencies:
"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;
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;
import React from "react";
const About = () => {
return (
<div>
<h1>About Page</h1>
</div>
);
};
export default About;
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
1. Using <Link> for Navigation
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;
import React from 'react';
const About = () => {
return (
<div>
<h1>About Page</h1>
</div>
);
};
export default About;
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
cIn 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.
2. Programmatic Navigation Using useNavigate()
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;
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;
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;
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;
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.