Ganchos de enrutador React

Ahora que comprende por qué se agregan ganchos para el enrutamiento, veamos los ganchos en acción.

useParams

useParamsHook devuelve un objeto que contiene pares clave-valor de los parámetros pasados ​​en una URL dinámica .

Por ejemplo, supongamos que tiene un Usercomponente de página que acepta idcomo parámetro en la URL.

<Route path="/user/:id">
  <User />
</Route>

import { useParams } from "react-router-dom";

const User = () => {
  const params = useParams();
console.log(params);
return (
    // ...
  )
}

{
  id: 3,
}

import {
  // ...
  useParams,
} from "react-router-dom";
// /user/:id
const User = () => {
  const params = useParams();
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
    </div>
  );
};

Los useHistoryHooks devuelven el historyobjeto, que el enrutador usa internamente para manejar los cambios de ruta. El historyobjeto se utiliza para administrar el historial de sesiones.

Por ejemplo, puede usar el history.push()método para agregar una nueva entrada a la pila de historial y navegar al usuario desde la ruta actual:

import {
  // ...
  useHistory,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

useLocation

El useLocationHook te permite acceder al locationobjeto que representa la URL activa. El valor del locationobjeto cambia cada vez que el usuario navega a una nueva URL.
El useLocationgancho puede ser conveniente cuando tiene que activar cualquier evento cada vez que cambia la URL.

Considere que debe realizar un seguimiento de las vistas en las páginas de perfil de los usuarios. Puedes detectar cambios en el locationobjeto usando el useEffectHook, que viene con React.

import {
  // ...
  useLocation,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
  const params = useParams();
  const location = useLocation();
useEffect(() => {
    console.log(location.pathname);
    // Send request to your server to increment page view count
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      <div>current user Id - {params.id}</div>
      <div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

El useRouteMatchgancho hace coincidir la URL activa con una ruta dada, de manera similar a cómo funciona el Routecomponente. Es un Hook muy interesante; puede deshacerse del Routecomponente innecesario y acceder al matchobjeto.

Ahora puede cambiar la ruta en el componente de ruta de la página de usuario para simplemente /user:

<Route path="/user/">
  <User />
</Route>

import {
  // ...
  useRouteMatch,
} from "react-router-dom";
const User = () => {
  const history = useHistory();
const routeMatch = useRouteMatch("/user/:id");
  const location = useLocation();
useEffect(() => {
    console.log(location);
  }, [location]);
const handleBack = () => {
    history.goBack();
  };
const handleNavigation = () => {
    history.push("/user/5");
  };
return (
    <div>
      <div>This is the user page</div>
      {routeMatch ? (
        <div>user Id - {routeMatch.params.id}</div>
      ) : (
        <div>You are viewing your profile</div>
      )}
<div>
        <button onClick={handleBack}>Go Back</button>
      </div>
      <div>
        <button onClick={handleNavigation}>Go To Different User</button>
      </div>
    </div>
  );
};

Conclusión

Los ganchos son una gran adición al ecosistema de React. Ahora que ha visto algo de código sobre cómo manejar el enrutamiento con Hooks, está listo para aprovechar al máximo lo que tienen para ofrecer.

¡Hasta la próxima, mantente a salvo y sigue codificando con React Hooks!