Los ganchos del enrutador React

React Router 5 aprovecha 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 rutas.

Antes de reaccionar al enrutador 5

// When you wanted to render the route and get router props for componentRoute path="/" component={Home} /
// Or when you wanted to pass extra propsRoute path="/" render={({ match }) = Profile match={match} mine={true} /}

Cuando se utiliza la componentsintaxis, los accesorios de ruta ( matchy location) historyse pasan implícitamente al componente. Pero debe cambiarse renderuna vez que tenga accesorios adicionales para pasar al componente. Tenga en cuenta que agregar una función en línea a la componentsintaxis haría que el componente se volviera a montar en cada renderizado.

Después de reaccionar al enrutador 5

Route path="/"  Home //Route

Tenga en cuenta que no hay transferencia implícita de ningún accesorio al Homecomponente. Pero sin cambiar nada en Routesí mismo, puede agregar accesorios adicionales al Homecomponente. Ya no puedes cometer el error de volver a montar el componente en cada renderizado y ese es el mejor tipo de API.

Pero ahora los accesorios de ruta no se pasan implícitamente, entonces, ¿cómo accederemos matcha historyo 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.

usoHistorial

• Acceso Proporciona al historyaccesorio en React Router.
• Se refiere a la dependencia del paquete histórico que utiliza 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;}

utilizarUbicación

• Acceso Proporciona al locationaccesorio en React Router.
• Es similar al window.locationpropio navegador, pero se puede acceder a él desde cualquier lugar, 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 oa 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 pProfile/p;}

Dado que la locationpropiedad es inmutable, useEffectllamará a la función cada vez que cambie la ruta, lo que la hace perfecta para operar con parámetros de búsqueda o ruta actual.

utilizar parámetros

• Proporciona acceso a los parámetros de búsqueda en la URL.
• Antes esto solo era posible 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    /  );}

utilizarRouteMatch

• Proporciona acceso al matchobjeto.
• Si no se le proporciona argumentos, devuelve la coincidencia más cercana en el componente de 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 usarlo useRouteMatchpara acceder a una partida sin generar un archivo Route. Esto se hace pasándole el argumento de ubicación.

Por ejemplo, considere que necesita que se muestre su propio perfil en /profiley el perfil de otra persona si la URL contiene el nombre de la persona /profile/dano /profile/ann. Sin usar el gancho, escribirías un Switch, enumerarías ambas rutas y las personalizarías 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 : pMy 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 RouteMe gusta exacto sensitivecomo objeto con useRouteMatch.

terminando

Los ganchos y lo explícito Routetienen una ventaja oculta en sí mismos. Después de enseñar estas técnicas en múltiples talleres, me di cuenta de que ayudan a evitar mucha confusión y complejidades que surgieron con los patrones anteriores. De repente hay muchos menos errores no forzados. Seguramente ayudará 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 nuevas versiones de React Router.