How to Redirect to Another Page in ReactJS ?
Last Updated :
09 Jan, 2025
Redirect to another page in React JS refers to navigating to different components in the Single Page React Application using the react-router-dom package. To switch between multiple pages react-router-dom enables you to implement dynamic routing on a web page.
In this article, we’ll explore how to redirect to another page in ReactJS.
Approach
To redirect to another page in React we will be using the Navigate component from react-router-dom. In React Router v6, the Navigate component provides a declarative approach for redirecting users from one route to another within a React application. This method allows for conditional redirection directly in the component’s render logic, making it a flexible and easy-to-understand approach for handling navigation.
Utilizing the useHistory hook is important in building robust React applications, as it allows for programmatic navigation, enabling developers to redirect users seamlessly based on application state or user actions.
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 structure
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"
}Example: This example demostrates redicting the random urls to home page in react using the Navigate component of react router dom.
JavaScript
// Filename - App.js
import "./App.css";
// importing components from react-router-dom package
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from "react-router-dom";
// import Home component
import Home from "./components/Home";
// import About component
import About from "./components/About";
// import ContactUs component
import ContactUs from "./components/ContactUs";
function App() {
return (
<>
{/* This is the alias of BrowserRouter i.e. Router */}
<Router>
<Routes>
{/* This route is for home component
with exact path "/", in component props
we passes the imported component*/}
<Route
exact
path="/"
element={<Home />}
/>
{/* This route is for about component
with exact path "/about", in component
props we passes the imported component*/}
<Route
path="/about"
element={<About />}
/>
{/* This route is for contactus component
with exact path "/contactus", in
component props we passes the imported component*/}
<Route
path="/contactus"
element={<ContactUs />}
/>
{/* If any route mismatches the upper
route endpoints then, redirect triggers
and redirects app to home component with to="/" */}
{/* <Redirect to="/" /> */}
<Route
path="*"
element={<Navigate to="/" />}
/>
</Routes>
</Router>
</>
);
}
export default App;
// Filename - Home.jsx
import React from "react";
// Importing Link from react-router-dom to
// navigate to different end points.
import { Link } from "react-router-dom";
const Home = () => {
return (
<div>
<h1>Home Page</h1>
<br />
<ul>
<li>
{/* Endpoint to route to Home component */}
<Link to="/">Home</Link>
</li>
<li>
{/* Endpoint to route to About component */}
<Link to="/about">About</Link>
</li>
<li>
{/* Endpoint to route to Contact Us component */}
<Link to="/contactus">Contact Us</Link>
</li>
</ul>
</div>
);
};
export default Home;
// Filename - About.jsx
import React from "react";
const About = () => {
return (
<div>
<h1>About Page</h1>
</div>
);
};
export default About;
// Filename - ContactUs.jsx
import React from "react";
const ContactUs = () => {
return (
<div>
<h1>Contact Us Page</h1>
</div>
);
};
export default ContactUs;
To start the application run the following command.
npm start
Output: This output will be visible on https://localhost:3000/ on browser