¿Cómo redirigir en React con Typescript?

La redirección se utiliza cuando, por ejemplo, un usuario inicia sesión en un sitio web y él o ella inició sesión correctamente después de iniciar sesión con éxito en el respaldo, tenemos que redirigir al usuario a algún lugar de nuestro sitio web. La redirección se puede usar de muchas maneras, todo depende de la terminología de cómo usarla. 

En React, se usa un paquete muy famoso llamado react-router-dom para enrutar el sitio web, en ese paquete un gancho o podemos decir que la función llamada useNavigate está ahí para redirigir 

Requisito previo:

• Instale Nodejs en su máquina.
• Instale TypeScript , abra su Powershell o cmd Ejecute y use el siguiente comando.

npm install -g typescript

Creación de la aplicación React y la instalación del módulo:  

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app my-app --template typescript

Paso 2: para navegar o redirigir, debemos instalar un nuevo paquete que es react-router-dom usando el siguiente comando:

npm install @types/react-router-dom
npm install react-router-dom

Paso 3: abra su IDE o editor de código en ese directorio donde crea la aplicación de reacción. Ahora vaya a la carpeta src y cree una carpeta llamada components . Cree tres archivos en la carpeta de componentes, que son el archivo Main.tsx , First.tsx y Second.tsx .

Estructura del proyecto: Debería verse así.

Implementación: Anote el siguiente código en los archivos respectivos.

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;

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;

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;

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;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.  

npm start

Producción: