4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

Enrutando nuestras vistas con React Router

¿Qué es React Router?
Las anchor <a> ahora son un problema

¿Qué es React Router?

React Router, una librería JS disponible a través de NPM que ayuda principalmente con 2 problemas:

  • Visualización condicional para los componentes React basados en la URL del sitio web actual.
  • Navegación de aplicaciones web sin necesidad de actualizar.

El siguiente comando de terminal te permite instalar React Router en tu proyecto:

1$ npm install --save react-router

¿Por qué necesito esto?

Deja de leer si no estás creando aplicaciones completas usando React, no necesitas React-Router para aplicaciones de una sola página o componentes pequeños.

Para el resto de nosotros que creamos aplicaciones web reales, necesitamos conectar varias vistas (componentes React) en una sola aplicación grande. Ese proceso se llama "routing" (enrutamiento).

Por ejemplo, necesitamos las siguientes URL de aplicación para que coincidan con los siguientes componentes:

react router

Definiendo tus Rutas de Aplicación

¿Qué páginas/vistas quieres que tenga tu aplicación? Siempre puedes empezar con lo básico:

  • Home: Lo que sus usuarios públicos ven cuando llegan a tudominio.com
  • Login/Signup/Forgot: Un formulario de inicio de sesión y un formulario de registro y el formulario de recordatorio de contraseña.
  • Private: Lo que sus usuarios privados ven justo después de iniciar sesión.

El resto de las páginas dependen de tu aplicación y de cómo quieres que los usuarios naveguen por tu sitio.

react router URL y componentes

Mapeando tus Vistas a URLs

Este es el mapa del sitio para cualquier sitio web de comercio electrónico típico:

react router ecommerce ejemplo

Codificando tus Rutas de Aplicación

Una vez que hayas terminado de asignar las vistas de la aplicación con las URL, puedes comenzar a programar todo, ¡y aquí es cuando entra en juego React-Router!

La mejor práctica es siempre crear un componente llamado <Layout /> que se encargue de encaminar al usuario a las vistas específicas que debería ver, dependiendo de cada URL en particular.

Este es un ejemplo del mismo mapa del sitio de comercio electrónico pero ahora utilizando React Router v6:

1// Este componente <Layout /> se encargará de enrutar las URL con todas las vistas de mi aplicación 2 3export const Layout = () => { 4 return ( 5 <div> 6 <BrowserRouter> 7 <Routes> 8 <Route element={<Home />} path="/" /> 9 <Route element={<Demo />} path="/demo" /> 10 <Route element={<Single />} path="/single/:theid" /> 11 <Route element={<h1>Not found!</h1>} /> 12 </Routes> 13 </BrowserRouter> 14 </div> 15 ); 16}

Hay 3 componentes que entender aquí:

  • <BrowserRouter>: Cada vez que abres una nueva etiqueta de BrowserRouter, básicamente le estás diciendo a React que todo lo que está en el medio debe ser condicionalmente renderizado en base a <Routes> particulares (URLs).
  • <Routes>: Funciona de manera similar a la instrucción switch en JavaScript pero para Rutas... Le dice a React que muestre la única <Route> que coincide con la URL mostrada.
  • <Route>: Es la forma en que React-Router mapea rutas con componentes, por ejemplo:
1<Route element={<Signup />} path="/sign-up" />

Esta ruta le dice a React que: cuando la URL coincida con "sign-up", debería mostrarse el componente Signup.

Las anchor <a> ahora son un problema

Los anchors llevan a los usuarios a otros sitios web o URL, y eso esta bien para un HTML+JS básico, pero ahora NO queremos que nuestros usuarios sean llevados a otros sitios web o URL. Queremos que permanezcan en la misma pestaña pero cargando la página siguiente sin tener que actualizar. Tenemos dos formas posibles de hacer eso:

1. Usando una etiqueta <Link>:

React Router creó un componente que podemos usar en lugar de <a>:

1<Link to="/login">Take me to login</Link>

2. Usando history.push('new/url/here'):

React Router siempre pasa una prop (propiedad) a cada vista, un elemento llamado "history" que contiene mucha información útil para usar cuando se enruta a los usuarios. Una de las muchas utilidades es la función "push" que básicamente redirige al usuario a la ruta dada.

Puedes acceder al objeto de history usando el hook de react useNavigate de esta manera:

1import { useNavigate } from "react-router-dom"; 2 3// Dentro del componente declaras useNavigate de esta manera: 4const navigate = useNavigate();

Luego, en cualquier parte de cualquiera de tus componentes, puedes redireccionar a los usuarios de forma programática de la siguiente manera:

1<button onClick={() => navigate.push("/login")}>Take me to login</button>

Ejemplo en Vivo:

Aquí hay un ejemplo en vivo que utiliza todo lo que hemos aprendido durante esta lectura, haz clic y juega para entenderlo, aprenderlo y repetirlo:

Haz clic aquí para abrir el demo en una nueva ventana