Redirecting to Another Page in 5 Seconds with jQuery in React
- Published on
- Jigar Patel--3 min read
Overview
- Introduction
- Prerequisites
- Step 1: Set Up Your React App
- Step 2: Create the App Component
- Step 3: Run Your React App
- Step 4: Test the Redirect
- Output:
- Source Code
- About the Author
- We're Hiring
- Related Blogs
Introduction
In this tutorial, we'll walk you through the process of creating a simple web application using React that redirects users to another page after a 5-second delay. This can be handy for scenarios where you want to guide users to a different part of your website or to an external link.
Prerequisites
Before we start, make sure you have Node.js and npm (Node Package Manager) installed on your computer.
Step 1: Set Up Your React App
If you haven't already created a React app, you can do so by running the following command in your terminal:
npx create-react-app page-redirect-demo
This will create a new React app with the name "page-redirect-demo."
Step 2: Create the App Component
Next, open the src/App.js file and replace its contents with the following code:
import React, { useState } from 'react';
function App() {
const [redirecting, setRedirecting] = useState(false);
const handleClick = () => {
setRedirecting(true);
setTimeout(() => {
window.location.href = 'https://jbcodeapp.com';
}, 5000);
};
return (
<div>
<h1>Redirecting to Another Page in 5 Seconds with jQuery</h1>
{redirecting ? (
<p>Redirecting soon....</p>
) : (
<button onClick={handleClick}>Click to redirect</button>
)}
</div>
);
}
export default App;
In this code, we define a React functional component named App. It contains a state variable redirecting, which we'll use to control the display of a button and a message. When the button is clicked, the handleClick function sets redirecting to true and then uses setTimeout to redirect the user to https://jbcodeapp.com after a 5-second delay.
Step 3: Run Your React App
Now, go back to your terminal and navigate to your project folder (page-redirect-demo). Start your React app by running:
npm start
Your app will be accessible at http://localhost:3000. Open a web browser and go to this URL.
Step 4: Test the Redirect
You should see the message "Redirecting to Another Page in 5 Seconds with React" and a button that says "Click to redirect." Click the button, and after a 5-second delay, you will be redirected to https://jbcodeapp.com.
Output:
Source Code
The complete source code for this tutorial is available on GitHub. You can find it Here.
About the Author
Jigar Patel is a React.js enthusiast and a software developer at JBCodeapp Company. Visit our JBCodeapp to learn more about our work in the React.js ecosystem.
We're Hiring
Are you passionate about React.js development? We're always on the lookout for talented developers to join our team. Check out our careers page for current job openings.