¡Hola! 🙌 soy Juan carlos del staff de EDteam y este es el primer blog que hago para todos ustedes. Asi que, demosle con todo el flow porque hablaremos sobre React Router 🔥
¿Qué es React Router?
Básicamente es un conjunto de componentes de navegación que podemos utilizar en nuestra aplicación web o aplicación con React Native. En este artículo nos vamos a enfocar en la parte web por lo que con esta librería podemos lograr lo siguiente:
- Establecer rutas en nuestra aplicación (Ejem. Home, Inicio de sesión, etc.)
- Crear páginas públicas y privadas.
- Realizar redirecciones a otras páginas según ciertas condiciones
- Acceder al historial de navegación
- Crear rutas para páginas 404 (no encontradas)
Tal vez ahora te preguntes, Eso esta super y toda la vaina pero ¿cómo lo instalo en mi aplicación web?
No te preocupes que ahora vamos a incrementar el flow.. pasemos a modo sayayin 🔥
Seguramente ya has creado tu aplicación de React con create-react-app y lo siguiente que debes instalar es la dependencia react-router-dom.
Si deseas utilizar entornos de React cómo CodeSandBox o Stackblitz puedes hacerlo sin problema. Para fines de demostración lo haré en Stackblitz y podrás ver el código ahí.
Muy bien, ya que tenemos todo listo, vayamos de una al componente que estés usando para renderizar la información en pantalla sea App.js (create-react-app) o index.js si utilizas entornos de react en línea.
Hasta ahora tenemos nuestro componente sin ninguna modificación:
¡Ahora vamos a ponerle el sabor con todo el flow!
Haz el siguiente import de { BrowserRouter as Router, Route, Link} de la librería react-router-dom. Lo que estamos haciendo es importando estos componentes de navegación que se dividen en:
- BrowserRouter (Router): Este inyecta propiedades a nuestro componente para poder acceder al historial de navegación, realizar redirecciones, etc.
- Route: Es el componente que utilizamos para crear nuestras rutas a otros páginas (componentes)
- Link: Este es utilizado para los enlaces (igual como etiquetas
<a></a>)
Listo, ahora vamos a crear un pequeño menú para nuestra app para que no esté tan forever alone y lo haremos mediante una lista no ordenada <ul></ul> y haremos algunos cambios de estructura HTML e importamos la librería de EDteam: EDgrid
Luego de unos ajustes BOOM 💣💥
Pensarás lo siguiente 😱Wow! pero que rayos hiciste. Se ve Genial my friend!! pues te explico con todo el flow:
- Utilizamos un fragment
<\> </>en el return del componente para agregar ahi todos los elementos (esto es propio de React) porque JSX solo permite renderizar un solo elemento y agregamos un contenedor para todos los demás items hijos. - Agregamos un título para subirle el ki a nuestro ejemplo y luego agregamos el componente
Router. Dentro de este componente, creamos el menu y en cada<li>agregamos el componenteLinkcon un destino.
Ahora vamos a crear las rutas para que imprima la información necesaria según el item del menu y para hacer esto, vamos a utilizar el componente Route el cual recibe entre sus principales propiedades un destino (path) y un componente a renderizar (component). Vamos a crear 3 componentes funcionales que son: Inicio, Info, Contacto y luego de crearlos lo utilizamos con Route
Routelo que haces es que cuando se acceda a la dirección /info imprima la información de ese componente que se especifica en la propiedad component. Si haces click ahora te llevará a la información de cada uno y estarás maravillado de esta magia tan genial que ni Disney tiene pa darte.
Pero esperame un momentito, tenemos un pequeño problema. Si haces click en cada uno de los enlaces te presenta la información del componente actual y del siguiente, lo cual no es muy bonito que digamos.
Para solucionar esto agrega la propiedad exact antes de el path en cada Route que hemos creado y listo.
<Route exact path="/" component={Home}/>
<Route exact path="/info" component={Info}/>
<Route exact path="/contacto" component={Contacto}/>
Ahora si haces click nuevamente, ya funciona como debería, ¡con todo el flow! 👏
Por ultimo, vamos a establecer un ruta para páginas no encontradas (404) y mostrar un mensaje para ello. Primero vamos a crear el componente funcional PageNotFound
import React from "react"
const PageNotFound = () => (
//Fragment
<>
{/* Mensaje cuando llegue a página incorrecta */}
<p>Uy, llegaste a un mundo desconocido. Mejor regresa al inicio.</p>
</>
)
export default PageNotFound
Listo nuestro componente. Ahora, en nuestro archivo principal, tenemos que usar el componente Switch de React Router para que intercambie las rutas según el destino y si el usuario llega a una dirección incorrecta, que imprima la información del componente PageNotFound.
Solo necesitas importarlo junto a los demás componentes de React Router que has colocado anteriormente y luego tomas los Routes para ponerlos dentro del Switch:
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/info" component={Info}/>
<Route exact path="/contacto" component={Contacto}/>
<Route component={PageNotFound}/>
</Switch>
Si te fijas, la última ruta no tiene un path definido y recibe como componente nuestro PageNotFound. Ahora si ingresas una url incorrecta, el Switch muestra el componente que hemos creado. Intenta con /contactox y verás la magia 😉
Aquí puedes ver el código funcionando:https://stackblitz.com/edit/example-react-router?embed=1&file=index.js&view=preview
Señoras y señores, hasta aquí ha sido este blog. Espero haberte ayudado a entender este tema de rutas en react y que puedas implementarlo en tus proyectos. Recuerda que tenemos una especialidad de React en EDteam donde tratamos más a fondo estos temas.
Ahora si, Hasta la vista My friends.... Ya tu sabeeeeeeee
