Header Ads Widget

Ticker

6/recent/ticker-posts

React Router 5.1+ Hooks

 React Router 5.1 introdujo cuatro ganchos para implementar el enrutamiento de una manera basada en funciones.

En este tutorial, veremos cómo usar los ganchos de React Router 5 por ejemplo.

Tenga en cuenta que debe usar la versión React 16.8+ para usar ganchos incorporados o personalizados de terceros, incluidos los ganchos del enrutador.

Ejemplo de React Router 5/4 sin ganchos

Veamos cómo enrutar un componente sin la forma antigua, es decir, sin usar ganchos.

Si necesita mapear un componente nombrado Homecomo ejemplo a la ruta principal, simplemente debe escribir la siguiente línea de código después de importar los componentes RouteHome:

<Route path="/" component={Home} />

Ahora, cuando vaya a la /ruta, Homese renderizará el componente.

Al componente se le pasarán varios accesorios de ruta como matchlocationhistoryque le permitirán acceder a la información de enrutamiento en su componente.

Si necesita pasar apoyos adicionales. tendrás que usar la renderpropiedad en lugar de component:

<Route path="/" render={({ match }) => <Home match={match} mine={true} />}>

Nuestro ejemplo con React Router 5 Hooks

Ahora, escribamos nuestro ejemplo anterior con ganchos. Mapeamos el Homecomponente a la /ruta usando la siguiente sintaxis:

<Route path="/">
  <Home />
</Route>

Los accesorios de ruta como matchhistorylocationno se pasan al Homecomponente, por lo que debemos usar los nuevos ganchos del enrutador para acceder a estas funciones.

El useHistorygancho

El useHistorygancho permite el acceso al historyaccesorio en React Router.

Primero, necesita importar el gancho del react-router-dompaquete:

import { useHistory } from 'react-router-dom';

A continuación, puede llamar al gancho dentro del Homecomponente de la siguiente manera:

function Home() {
  const history = useHistory();
  return <button onClick={() => history.push('/user')}>User</button>;
}

El useLocationgancho

El useLocationgancho permite el acceso al locationaccesorio en React Router que proporciona el estado y la ubicación del enrutador.

Puede utilizar este gancho para acceder a los parámetros de consulta o la cadena de ruta.

Debe comenzar importando el gancho de la siguiente manera:

import { useLocation } from 'react-router-dom';

A continuación, debe usarlo dentro de su componente de la siguiente manera:

function User() {
  const location = useLocation();
  useEffect(() => {

    console.log("Location Info: ", location.pathname. location.search);

  }, [location]);
  return <div>User Info</div>;
}

Cada vez que locationcambie la propiedad, el location.pathnamelocation.searchse imprimirá en la consola.


Publicar un comentario

0 Comentarios