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

1 thought on “How to redirect to another page in ReactJS”