Los ganchos de React Router | Programar Plus

React Router 5 adopta el poder de los ganchos y ha introducido cuatro ganchos diferentes para ayudar con el enrutamiento. Este artículo le resultará útil si está buscando una introducción rápida a los nuevos patrones de React Router. Pero antes de ver los ganchos, comenzaremos con un nuevo patrón de representación de ruta.

Antes de React Router 5

// When you wanted to render the route and get router props for component
<Route path="https://css-tricks.com/" component={Home} />


// Or when you wanted to pass extra props
<Route path="https://css-tricks.com/" render={({ match }) => <Profile match={match} mine={true} />}>

Al usar el component sintaxis, accesorios de ruta (match, location y history) se transmiten implícitamente al componente. Pero hay que cambiarlo a render una vez que tenga accesorios adicionales para pasar al componente. Tenga en cuenta que agregar una función en línea al component la sintaxis llevaría a que el componente se volviera a montar en cada render.

Después de React Router 5

<Route path="https://css-tricks.com/">
  <Home />
</Route>

Tenga en cuenta que no hay una transferencia implícita de ningún apoyo al Home componente. Pero sin cambiar nada con el Route sí mismo, puede agregar cualquier accesorio adicional al Home componente. Ya no puede cometer el error de volver a montar el componente en cada render y ese es el mejor tipo de API.

Pero ahora los accesorios de ruta no se pasan implícitamente, entonces, ¿cómo accedemos match, history o location? ¿Tenemos que envolver todos los componentes con withRouter? Ahí es donde intervienen los ganchos.

Tenga en cuenta que los ganchos se introdujeron en la versión 16.8 de React, por lo que debe estar por encima de esa versión para usarlos.

useHistory

• Proporciona acceso a la history prop en React Router
• Se refiere a la dependencia del paquete de historial que usa el enrutador
• Un caso de uso principal sería el enrutamiento programático con funciones, como push, replaceetc.

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

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

useLocation

• Proporciona acceso a la location prop en React Router
• Esto es similar a window.location en el navegador, pero es accesible en todas partes, ya que representa el estado y la ubicación del enrutador.
• Un caso de uso principal para esto sería acceder a los parámetros de consulta o la cadena de ruta completa.

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

function Profile() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
  }, [location]);
  return <p>Profile</p>;
}

Desde el location la propiedad es inmutable, useEffect llamará a la función cada vez que cambie la ruta, lo que la hace perfecta para operar en los parámetros de búsqueda o en la ruta actual.

useParams

• Proporciona acceso a los parámetros de búsqueda en la URL.
• Esto era posible antes solo usando match.params.

import { useParams, Route } from 'react-router-dom';

function Profile() {
  const { name } = useParams();
  return <p>{name}'s Profile</p>;
}

function Dashboard() {
  return (
    <>
      <nav>
        <Link to={`/profile/ann`}>Ann's Profile</Link>
      </nav>
      <main>
        <Route path="/profile/:name">
          <Profile />
        </Route>
      </main>
    </>
  );
}

useRouteMatch

• Proporciona acceso a la match objeto
• Si no se proporciona ningún argumento, devuelve la coincidencia más cercana en el componente o sus padres.
• Un caso de uso principal sería construir rutas anidadas.

import { useRouteMatch, Route } from 'react-router-dom';

function Auth() {
  const match = useRouteMatch();
  return (
    <>
      <Route path={`${match.url}/login`}>
        <Login />
      </Route>
      <Route path={`${match.url}/register`}>
        <Register />
      </Route>
    </>
  );
}

También puedes usar useRouteMatch para acceder a una coincidencia sin renderizar una Route. Esto se hace pasándole el argumento de ubicación.

Por ejemplo, considere que necesita su propio perfil para ser renderizado en /profile y el perfil de otra persona si la URL contiene el nombre de la persona /profile/dan o /profile/ann. Sin usar el gancho, escribirías un Switch, enumere ambas rutas y personalícelas con accesorios. Pero ahora, usando el gancho podemos hacer esto:

import {
  Route,
  BrowserRouter as Router,
  Link,
  useRouteMatch,
} from 'react-router-dom';

function Profile() {
  const match = useRouteMatch('/profile/:name');

  return match ? <p>{match.params.name}'s Profile</p> : <p>My own profile</p>;
}

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/profile">My Profile</Link>
        <br />
        <Link to={`/profile/ann`}>Ann's Profile</Link>
      </nav>
      <Route path="/profile">
        <Profile />
      </Route>
    </Router>
  );
}

También puedes usar todos los accesorios en Route me gusta exact o sensitive como un objeto con useRouteMatch.

Terminando

Los ganchos y explícitos Route viene con una ventaja oculta en sí mismo. Después de enseñar estas técnicas en múltiples talleres, me he dado cuenta de que estas ayudan a evitar mucha confusión y complejidades que venían con los patrones anteriores. De repente, hay muchos menos errores no forzados. Seguramente ayudarán a que el código de su enrutador sea más fácil de mantener y le resultará mucho más fácil actualizar a las nuevas versiones de React Router.