Redirecting is used when let say a user is a login to a website and he or she logged in successfully after logging in successfully in backed we have to redirect the user somewhere on our website. Redirecting can be used in many ways it all depends on terminology how to use it.
In React a very famous package called react-router-dom is used for Routing the website, in that package a hook or we can say function named as useNavigate is there for redirecting
Prerequisite:
- Install Nodejs on your machine.
- Install typescript, Open your Powershell or cmd Run and use the following command.
npm install -g typescript
Creating React Application and Module Installation:
Step 1: Create a React application using the following command:
npx create-react-app my-app --template typescript
Step 2: For navigating or Redirecting we have to install a new package which is react-router-dom using the following command:
npm install @types/react-router-dom npm install react-router-dom
Step 3: Open your IDE or code editor in that directory where you create the react app. Now go to the src folder make a folder named as components. Create three files in the components folder which are Main.tsx, First.tsx, and Second.tsx file.
Project Structure: It should look like this.
Implementation: Write down the following code in respective files.
App.tsx
import React from "react"; import "./App.css"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import First from "./components/First"; import Second from "./components/Second"; import Main from "./components/Main"; function App() { return ( <Router> <Routes> <Route path="/first" element={<First />}/> <Route path="/second" element={<Second />}/> <Route path="/" element={<Main/>}/> </Routes> </Router> ); } export default App; |
Main.tsx
import { useNavigate } from 'react-router-dom'; function Main() { const navigate = useNavigate(); const goToSecondsComp = () => { // This will navigate to second component navigate('/second'); }; const gotToFirstComp = () => { // This will navigate to first component navigate('/first'); }; return ( <div className="App"> <header className="App-header"> <p>Main components</p> <button onClick={goToSecondsComp}>go to 2nd </button> <button onClick={gotToFirstComp}>go to 1st </button> </header> </div> ); } export default Main; |
First.tsx
import React from 'react'; import { Link } from 'react-router-dom'; function First() { return ( <div className="App"> <header className="App-header"> <p>First components</p> <Link to="/">go back</Link> </header> </div> ); } export default First; |
Second.tsx
import React from 'react'; import { Link } from 'react-router-dom'; function Second() { return ( <div className="App"> <header className="App-header"> <p>First components</p> <Link to="/">go back</Link> </header> </div> ); } export default Second; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
