Gancho ReactJS useNavigate()

El enlace useNavigate() se introdujo en React Router v6 para reemplazar el enlace useHistory(). En la versión anterior, el gancho useHistory() accede al objeto de historial del enrutador React y navega a los otros enrutadores utilizando los métodos de inserción o reemplazo. Ayuda ir a la URL específica, páginas hacia adelante o hacia atrás. En la versión actualizada, la nueva API de navegación de React Router proporciona un gancho useNavigate() que es una versión imperativa para realizar las acciones de navegación con una mejor compatibilidad. 

Ahora entendamos el funcionamiento del gancho useNavigate() usando ejemplos. 

Creando la aplicación React e instalando el módulo:

Paso 1: Para comenzar, cree una aplicación React usando el siguiente comando:

 npx create-react-app <project_name>;

Paso 2: instale la última versión de react-router-dom en la aplicación React de la siguiente manera.

  npm install react-router-dom

Estructura del proyecto: cree una carpeta llamada components en la carpeta src y agregue los archivos Home.js y About.js. La estructura de carpetas será similar a la siguiente:

Ejemplo: En este ejemplo, usaremos el gancho useNavigate() para navegar a la página Acerca de y volver a la página de inicio. Desde el siguiente código, el usuario puede volver a la página de inicio desde la página Acerca de al hacer clic en el botón.

import React from 'react';
import {useNavigate} from "react-router-dom"
  
const Home = () => {
  const navigate = useNavigate();
    
  return (
      <>
        <h1 style={{color:"green"}}>GeeksForGeeks</h1>
        <button onClick={()=>navigate("/about")}>About</button>
      </>
  )
};
  
export default Home;

import React from 'react';
import {useNavigate} from "react-router-dom"
  
const About = () => {
  const navigate = useNavigate();
  
  return (
  <>
     <h1 style={{color:"green"}}>A Computer Science portal for geeks.</h1>
     <button onClick={()=>navigate(-1)}>Go Back Home</button>
  </>
  )
};
  
export default About;

Nota: Aquí, el argumento numérico ha pasado para mover el puntero de la pila de historial.

import React from "react";
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
  
function App() {
    
  return (
      <>
      <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home/>}/>
        <Route exact path="/about" element={<About/>}/>
      </Routes>
      </BrowserRouter>
      </>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: Del mismo modo, podemos pasar los argumentos numéricos para avanzar.

Gancho ReactJS useNavigate()