How to redirect in React with Typescript ?

Navigating users seamlessly through a React application is a fundamental aspect of creating a smooth and intuitive user experience. In this article, we delve into the world of redirects in React, specifically addressing the use of TypeScript for enhanced type safety and developer productivity.

Prerequisite:

• NodeJS
• React JS
• Typescript

Steps to Create React Application And Installing Module:

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
npm install -g typescript

Step 3: Navigate to the “src” folder, create a “components” folder within “src” and add three files: “Main.tsx” “First.tsx” and “Second.tsx” to the “components” folder.

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@types/react-router-dom": "^5.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.17.0",
    "react-scripts": "5.0.1",
    "typescript": "^5.3.2",
    "web-vitals": "^2.1.4",
}

Example: Write down the following code in respective files.

Javascript

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;

Javascript

//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;

Javascript

//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;

Javascript

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: