La guía del autoestopista para React Router v4: Grok React Router en 20 minutos

¡Hola, amigo React Hitchhiker! ¿Quieres que te lleve a React Router? Salta. ¡Vamos!

Para comprender la filosofía detrás de React Router, necesitamos saber qué es una aplicación de página única (SPA).

¿Qué es una aplicación de una sola página?

Básicamente, es una aplicación web o un sitio web que interactúa con el usuario reescribiendo dinámicamente la página actual en lugar de cargar páginas completamente nuevas desde un servidor.

¿Por qué es tan bueno?

1. evita la interrupción de la experiencia del usuario entre páginas sucesivas

2.Hace que la aplicación se comporte más como una aplicación de escritorio

3. todos los recursos de código se cargan dinámicamente y se agregan a la página según sea necesario, generalmente en respuesta a las acciones del usuario

4. porque es kewl y kewl y extra-ultra-wide-4K-level-of-kewl. ?

Los SPA son un estándar de la industria ahora, y muchas empresas están en la búsqueda de encontrar programadores para desarrollar sus proyectos.

¿Qué es React Router?

React Router es una herramienta que te permite manejar rutas.

Dado que se trata de un SPA, necesita una forma de activar los contenidos que se cargan en la pantalla. React Router introduce un concepto llamado "Dynamic Routing", que es bastante diferente del "Static Routing" al que estamos acostumbrados.

Cuando se trata de "Enrutamiento estático", declara sus rutas como parte de la inicialización de su aplicación antes de que se realice cualquier renderizado (Rails, Express, Ember, Angular, etc.).

"Enrutamiento dinámico" significa que el enrutamiento se lleva a cabo mientras se procesa su aplicación, no en una configuración o convención fuera de una aplicación en ejecución.

React Router v4 aboga e implementa un enfoque de enrutamiento basado en componentes.

Proporciona diferentes componentes de enrutamiento según las necesidades de la aplicación y la plataforma.

En este caso específico vamos a explorar   porque queremos utilizar el "enrutamiento dinámico" en un contexto de "aplicación web" y dejar los demás para otras circunstancias.

¿Quién creó React Router?

Estos dos seres humanos increíbles, Michael Jackson y Ryan Florence. ¡Y se merecen montones, montones de aplausos! Juntos iniciaron React Training.

Hoy en día, corrígeme si me equivoco, siguieron caminos separados:

Michael Jackson continúa desarrollando React Training.

Ryan Florence creó Reach.Tech.

¿React Router tiene algo que ver con Redux?

No. Aunque suelen aparecer juntos.

¿Estás seguro? Si ? Estoy seguro ?

Son herramientas excelentes e indispensables y, como son componentes de orden superior (básicamente funciones de JavaScript que toman un componente y devuelven uno nuevo), es común encontrarlos "compuestos" juntos.

Configuración, ensuciemos nuestras manos

Para guiarlo a través de este proceso, usaremos la aplicación Create React (CRA).

Al final, tendrá una plantilla limpia para crear sitios web simples.

Si por casualidad React o Create React App están más allá de su alcance, le recomiendo que primero los utilice y luego regrese con una taza de café.

De acuerdo, para aquellos que me apoyaron: después de instalar CRA, deben instalar el paquete react-router.

Si usa npm, simplemente abra su terminal, vaya a su carpeta CRA y escriba:

npm i -S react-router-dom

o

yarn add react-router-dom-si usa hilo como su administrador de paquetes.

Solo para verificar su package.jsony asegúrate de que todo esté bien, aquí está el mío:

Como puede ver, en este punto tenemos react-router-dom como dependencia.

Listo, npm o comienzo de hilo y ...

¡Explosión! ¡Estamos montando a mamá!

La aplicación que estamos construyendo

Hagamos un sitio web personal simple con una barra de navegación que le permita al usuario cambiar de contenido. Nuestro sitio web tendrá tres secciones principales llamadas Inicio , Acerca de y Temas .

La barra de navegación será un componente omnipresente mientras que el Inicio , Acerca de y temas se representará a continuación de acuerdo a las rutas seleccionadas.

¿Está viendo la URL del navegador: localhost: 3000 / home en la captura de pantalla a continuación?

Esto significa que el principal ruta se dispara y el Hogar vista es creada.

Este será nuestro resultado final:

¿Y esto ... ?, ¿esto es un sitio web?

? ¡Sí lo es!

¡Uno desnudo! ¡Solo trata de no sentirte inclinado hacia otras complejidades como el estilo, etc.! No quiero que se distraiga con nada más que asimilar lo simple que es implementar React Router v4 .

Entonces, después de que se haya recuperado del shock, démos el siguiente paso y veamos mi archivo /src/index.js.

/src/index.js

index.js es el primer archivo que carga CRA, el punto de inicialización de todo en su aplicación.

Echemos un vistazo a lo que hice:

Entonces que hacemos aqui?

  • Estamos importando el componente de la dependencia que hemos instalado e indicando que lo llamaremos a partir de ahora:

import { BrowserRouter as Router } from ‘react-router-dom’;

  • Estamos importando un componente, creado por mí, con las rutas que vamos a utilizar en nuestro sitio web - no se preocupe ahora con este componente:

import { Routes } from ‘./routes’;

los componente está tomando el lugar de la CRA predeterminada  componente. Es básicamente lo mismo, solo lo llamé porque siento que tiene sentido hacer que el código sea más significativo y legible.

Ya no está cargando una aplicación única, sino un componente de Rutas que manejará las rutas y activará el montaje y la representación de los componentes que se cargarán dentro de cada ruta.

  • Nosotros abrazamos con el componente.

Como una cuestión de hecho, funciona como un componente de orden superior que solo conoce a sus hijos en el futuro e interactúa con ellos en un ámbito más amplio, independientemente de quiénes y cuántos sean.

No tiene que preocuparse por cómo funciona para usarlo. Este es un asunto mucho más profundo y avanzado.

Solo asegúrate de entenderque React.DOM ya no carga una aplicación simple . Está cargando la aplicación adoptada por un componente llamado Routerque, en una instancia o alcance superior, puede interactuar con él y con el navegador DOM.

com ponente

Entonces, básicamente, ¿qué hace route.js ?

Comienza importando React y algunos componentes que veremos más adelante. Piense en ellos como simples componentes sin estado: Inicio , Acerca de , TopicList , TopicDetail , NavBar y NoMatch .

También importa tres componentes del paquete react-router-dom que necesitaremos invocar:, y .

Después de las importaciones, exportamos el componente sin estado Routes que invoca el NavBar(que siempre estará en la pantalla) y un componente.

¿Qué hace este tipo?

Este componente básicamente hace que el primer hijo o que coincide con la ubicación del navegador.

Comienza a probar cosas como esta: "es la URL del navegador en este ¿camino? ¿No? Bueno." Siguiente ruta. “¿Está la URL del navegador en esta otra ruta? No."

Siguiente ruta. "¡Oh lo tengo! Está en este, activemos el renderizado del componente y terminemos la comprobación ahora (no me importan las otras rutas a continuación ...) "

Si por casualidad esto sucede:

la segunda ruta nunca se activará porque Switch saltará antes de alcanzarla. Solo se va a tomar un café ... (¿¡¡y yo también !!!?

Dentro definimos cada uno .

Cada le dice esto al navegador:

“¡Hola navegador DOM! Si me elige porque su ubicación es (exactamente) esta, por favor renderice el siguiente Componente ”.

O en otros casos como el de abajo, dice:

"Oye, navegador, si en algún caso tu me eligió porque la ubicación es / Temas / ”algo” render Component Topic Detail. Ciertamente descubrirá quién es este: topicId (variable) que el usuario nos pide que hagamos coincidir y enrutarlo en consecuencia ”.

De acuerdo a todos. Porque tiene este comportamiento predeterminado de verificar cada ruta, necesitamos proporcionar un respaldo en caso de que no coincida con nada:

Esta última ruta simplemente muestra una página predeterminada que indica que no se coincidió con ninguna ruta, una especie de error HTTP 404.

¿Recuerda que aquí se trata de un SPA y de “Dynamic Routing” por lo que es una simulación como si estuviéramos demandando rutas a un servidor ?. ¡En realidad no lo somos!

Simplemente no sabemos qué renderizar si el usuario, por ejemplo, inserta algo que no coincida en la URL como este: // localhost: 3000 / HelloWorld .

Como esta ruta no estaba definida, proporcionamos un componente NoMatch para informarles sobre la inexistencia de la ruta.

está ahí porque si el usuario intenta cargar la URL sin ninguna ruta // localhost: 3000 / , obtendría un NoMatch porque no hay una ruta definida para ello. Entonces, la mejor manera de manejar esto es hacer uso de  y empuja al usuario a la ruta de / Home, que es por defecto nuestra primera pantalla de la aplicación.

¿Por qué es esto necesario?

Nuevamente, porque normalmente el usuario iniciaría la aplicación escribiendo su URL general y sin la el primer componente renderizado sería . No queremos eso, queremos que el usuario sea redirigido a la componente.

Vistas y / o componentes

En este punto de nuestra guía, me gustaría detenerme un poco para diferenciar una vista de un componente. Esta no es la esencia de esta guía, pero tendrá sentido después de que le muestre la estructura de carpetas de mi CRA .

Cuando estamos “pensando en React” y comenzamos a hacer una aplicación, y comienza a crecer, a veces nos detenemos porque sentimos que las cosas no están en el lugar correcto.

Esto significa que debemos dar nombre a esas cosas y mantenerlas separadas en diferentes "cajones" o "carpetas".

Las vistas y los componentes son cosas que se pintan en la pantalla. Entonces, ¿qué diferencia una cosa de la otra?

¿Y las vistas no son componentes? ¿Y los componentes no son vistas?

Bueno, en términos de lenguaje de codificación, una Vista y un Componente son ciertamente funciones o clases: componentes sin estado o componentes con estado, como lo llamamos en la jerga de React.

Entonces, ¿qué los diferencia?

Bueno, una vista tiene una ruta. Dentro de esta Vista puede renderizar muchos componentes.

Un componente suele ser una abstracción que se puede invocar muchas veces en diferentes vistas. Puede ser un botón, un formulario, un gráfico. Incluso puede ser algo más complejo, mientras que una vista es única y tiene una ruta.

Este es un concepto muy simple que debe entenderse al principio, en cuanto empecemos a hacer una aplicación tan pequeña como una página de inicio personal.

Echemos un vistazo a la estructura de mi carpeta CRA:

Entonces, como pueden ver, a mí, y al 99% del mundo, me gusta tener naranjas y peras en diferentes canastas. ¡Y tu tambien! ¡Tengo fe en ti! ¡Confío en ti!

Hay muchos patrones sobre cómo organizar estas cosas y mucha discusión comienza cuando presentamos más paquetes como Redux que transforman un poco la arquitectura de la aplicación, o cuando queremos pintar en la pantalla Dashboards, Widgets, Ciclismo Cerdos o cosas más raras ...

Pero, para diferenciar conceptos, observe detenidamente Vistas y componentes.

Inicio , Acerca de , TopicList y NoMatch son vistas. Tienen sus propias rutas que los activan.

NavBar es un componente omnipresente que siempre se invoca. No tiene ruta.

TopicDetails es un componente que mostrará la información del tema cuando se active la ruta TopicList /: topicId . Es un componente reutilizable que se puede importar a otros lugares y refactorizar o ampliar. No tiene una ruta específica.

La casa / Acerca de las vistas

Dentro de la carpeta de Inicio, tengo un archivo index.js y un archivo Home.js.

Tener un index.js para exportar los otros archivos es una buena práctica. ¿Confía en mí o trae un poco de vino porque será una larga charla?

… Oh, ¡bebamos el vino y hablamos más tarde! ?

Esta es una vista simple que solo exporta su título. La vista Acerca de es igual a esta.

Ahora echemos un vistazo a la vista TopicList porque es un poco diferente.

Vistas TopicList y TopicDetail

Así que TopicList View tiene este detalle de manejar diferentes rutas. Recuerde que / Topic /: topicId ruta que dicho dejar que TopicDetail se encargue?

Aquí estamos con eso.

TopicList recibe {match} como accesorio. No dejes que la función de desestructuración te asuste. Simplemente podríamos recibir accesorios y llamar a props.match . Así es simplemente como todos los chicos geniales de hoy en día desestructuran los accesorios para mejorar la legibilidad y el flujo de React. ¡También me gusta mucho! Es como coger una caja con el móvil dentro o coger el móvil directamente. De hecho, se guardó dentro de la caja, pero en este momento solo necesita revisar su correo electrónico. ¡Así que deja que la caja se quede donde está! ¡No lo lleves contigo al trabajo!

De todos modos, centrémonos en el código.

En este archivo, importamos un componente de React Router llamado {Link} porque queremos crear enlaces.

Recibimos un partido de la ruta que hemos elegido cuando haya hecho clic Temas y nos están prestando una lista desordenada con 3 opciones: Tema1 , Tema2 y Topic3 .

Básicamente, si el usuario elige Topic1 Link en la pantalla, elenviará la URL del navegador a esa ruta / Temas / Tema1 .

¿Qué pasa después? y detecta que la URL ha cambiado y echa un vistazo a su información para comprobar qué ruta debe activarse. Entonces descubren que ahora la ruta activada es la de / Topics /: topicId y activa la representación de TopicDetail . TopicDetail representará los detalles de Topic1 .

TopicDetail recibe la coincidencia del enrutador y muestra el topicId ubicado en match.params.topicId .

El componente NavBar

El componente NavBar tiene un papel especial aquí porque es omnipresente.

Su función es permitir al usuario navegar por el sitio web y mostrar los tramos (rutas) disponibles.

Como has visto al principio, está dentro pero afuera por lo que cualquier vista siempre estará compuesta con NavBar en la parte superior.

Como puede ver, su papel es básico. Solo abastece y dice preguntar para activar el elegido y renderizarlo en pantalla.

Por último, si bien no menos importante

Creo que en este momento probablemente ya tenga un conocimiento básico de cómo funciona React Router y puede usarse para hacer un sitio web simple.

Si desea verificar el código o probarlo, puede extraer mi repositorio, disponible en GitHub.

Bibliografía

Para hacer este artículo, utilicé 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 1 de una serie llamada "Guía del autoestopista para React Router v4". ¡Las partes 2 a 4 estarán disponibles en freeCodeCamp durante esta semana!

  • Parte II: [partido, ubicación, historial] - ¡tus mejores amigos!
  • 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!