La guía del autoestopista para React Router v4: [coincidencia, ubicación, historial]: ¡tus mejores amigos!

¡Oye! ¡Bienvenido a la Guía del autoestopista para React Router v4, Parte II!

Ahora que hemos puesto las cosas en marcha con nuestra primera aplicación pequeña, centrémonos en tus tres compañeros de viaje: partido , ubicación e historial .

¿Qué sucede si ingresa al código de su componente de inicio y coloca un archivo console.log allí para verificar los accesorios?

Router introduce en su componente los siguientes objetos:

¡Guauu! ¿De dónde viene eso? ?

Bueno, cada vista, componente o lo que sea que esté envuelto por Router tiene estos objetos. hace su trabajo como un componente de orden superior y envuelve sus componentes o vistas e inyecta estos tres objetos como accesorios dentro de ellos.

Entonces… ¿por qué están ahí y qué uso puedo hacer de ellos? ?

¡Serán tus mejores amigos! ¡Créeme! ?

Partido

El objeto de coincidencia contiene información sobre cómo coincidió con la URL.

  • params : (objeto), pares clave / valor analizados a partir de la URL correspondiente a los segmentos dinámicos de la ruta
  • isExact : (booleano), verdadero si la URL completa coincide (sin caracteres finales)
  • ruta : (cadena), el patrón de ruta utilizado para hacer coincidir. Útil para construir rutas anidadas . Veremos esto más adelante en uno de los próximos artículos.
  • url : (cadena), la parte correspondiente de la URL. Útil para construir enlaces anidados.

Entonces, en el componente Inicio tenemos este objeto de coincidencia :

isExact es verdadero porque toda la URL coincidió, el objeto params está vacío porque no le pasamos nada, la ruta y los valores de la clave de la URL son iguales, lo que confirma que isExact es verdadero.

Ahora echemos un vistazo a la vista TopicList :

Nada nuevo hasta ahora, la misma historia que en la Vista de inicio , mostrando la ruta y la URL de TopicList .

Pero, ¿y si echamos un vistazo a TopicDetails ?

Está bien, ¿qué tenemos aquí?

isExact sigue siendo verdadero porque se coincidió con toda la URL. El objeto params trae la información de topicId que se pasó al componente.

Preste atención a cómo el topicId es una variable.

Pero, ¿dónde asume el valor Topic1 ?

Simple, lo estás invocando de forma explícita en TopicList Links .

Compruebe cómo hemos utilizado la coincidencia para TopicList para conocer su URL.

Este vínculo puede ser dinámico . Más adelante, haremos un ejemplo en el que enlaza a una ruta relativa en la que no sabe previamente si es Topic1 o Topic3520 .

Pero…

¿En qué situación es falso isExact ?

Bueno ... déjame darte un ejemplo:

En esta situación, hemos introducido / HelloWorldSection en la URL del navegador.

Lo que sucede es que el enrutador no conoce la ruta completa a HelloWorldSection, por lo que lo enruta hasta donde conoce el camino.

isExact muestra falso que le dice precisamente que la " URL completa no coincidió ".

¡Esto es muy útil, como verá tan pronto como comience a hacer SPA con RRv4!

Solo para terminar nuestro enfoque para emparejar, mira esto:

Hemos utilizado match.params.topicId para imprimir en la pantalla nuestro nombre de tema.

Este es uno de los usos más comunes de los partidos .

Por supuesto que tiene multitud de aplicaciones. Supongamos que necesitamos obtener una API con esta información de topicId . ?

Ubicación

El objeto de ubicación representa dónde está la aplicación ahora, dónde desea que vaya o incluso dónde estaba.

También se encuentra en history.location pero no deberías usarlo porque es mutable.

Un objeto de ubicación nunca se modifica, por lo que puede usarlo en los ganchos del ciclo de vida para determinar cuándo ocurre la navegación. Esto es realmente útil para obtener datos o efectos secundarios de DOM .

Vamos a console.log (ubicación) dentro de la Vista de inicio :

No profundicemos mucho y sigamos con su funcionalidad simple.

Tiene la clave / valor de la ruta .

Puede usarlo, por ejemplo, para verificar si el nombre de la ruta ha cambiado:

Usted puede o lo. Puedes hacer un history.push o history.replace como veremos más adelante.

Puedes crear un objeto personalizado y usarlo

  • history.push (ubicaciónX)

También puedes pasarlo a y componentes.

Esto evitará que utilicen la ubicación real en el estado del enrutador. ¿Quizás quieras engañar a un componente para que se renderice en una ubicación diferente a la real?

Suficiente ubicación ahora ...

¡Pasemos a la historia !

Historia

El objeto de historial le permite administrar y manejar el historial del navegador dentro de sus vistas o componentes.

  • longitud : (número), el número de entradas en la pila del historial
  • acción : (cadena), la acción actual (PUSH, REPLACE o POP)
  • ubicación : (objeto), la ubicación actual
  • push (ruta, [estado]) : (función), inserta una nueva entrada en la pila del historial
  • reemplazar (ruta, [estado]) : (función), reemplaza la entrada actual en la pila del historial
  • go (n) : (función), mueve el puntero en la pila del historial en n entradas
  • goBack () : (función), equivalente a go (-1)
  • goForward () : (función,) equivalente a go (1)
  • block (prompt) : (función), impide la navegación

Así que vamos a console.logue el objeto de historial en nuestra Vista de inicio y veamos qué muestra:

De acuerdo, exactamente lo que esperábamos.

Nos dice que llegamos aquí con una acción PUSH , que la longitud del objeto es 40 (a medida que navega por el historial de su aplicación crece a 50 y se detiene allí, descartando las entradas más antiguas y manteniendo su tamaño cada vez que la aplicación empuja otra entrada del historial en el objeto).

Nos da la información de ubicación .

Nuevamente, el objeto de historial es mutable . Por lo tanto, se recomienda acceder a la ubicación desde los accesorios de renderizado de Route , no desde history.location .

Esto asegura que sus suposiciones sobre React sean correctas en los ganchos del ciclo de vida.

Por ejemplo:

Por lo general, puede usarlo para cambiar la ruta de la URL del navegador.

En el siguiente ejemplo evitamos y cree un botón que haga un empuje histórico:

Por supuesto, puede usarlo para activar el cambio de URL después de obtener algunos datos o efectos secundarios.

Es cómodo usarlo en medio de JSX donde no desea invocar componentes. Simplemente puede devolver un historial y activar el enrutador para actualizar la URL del navegador.

Por último, si bien no menos importante

Creo que en este momento ya tienes una buena idea sobre cómo usar la coincidencia , la ubicación y el historial .

No hice ningún cambio en nuestra plantilla inicial, así que no dudes en jugar con ella en el mismo repositorio que se proporciona en la Parte 1 de esta guía.

05. Bibliografía

Para hacer este artículo he utilizado la documentación de React Router que puedes encontrar aquí.

Todos los otros sitios que he usado están vinculados a lo largo del documento para agregar información o proporcionar contexto a lo que he tratado de explicarle.

Este artículo es la parte 2 de una serie llamada "Guía del autoestopista para React Router v4"

  • Parte I: Grok React Router en 20 minutos
  • Parte III: caminos recursivos, ¡al infinito y más allá!
  • Parte IV: configuración de ruta, el valor oculto de definir una matriz de configuración de ruta

? ¡Muchas gracias!