Hooks en React
Conceptos básicos. Router
1
Introducción
✤
Hasta el momento, hemos construido aplicaciones de una
sola página.
✤
Las aplicaciones, normalmente, son multipágina.
M. en C. Roberto Martínez Román - rmroman@tec.mx
2
El Router
✤
React no proporciona un mecanismo propio para manejar
las aplicaciones multipágina.
✤
Hay un enrutador que usaremos en los ejemplos:
➡
https://reactrouter.com/
M. en C. Roberto Martínez Román - rmroman@tec.mx
3
Ejemplo
✤
Crea un proyecto nuevo. ejemplo-mp.
➡
npx create-react-app ejemplo-mp
➡
Abre el proyecto en VSC.
➡
En la terminal de VSC instala react-router-dom.
✤
npm install react-router-dom
M. en C. Roberto Martínez Román - rmroman@tec.mx
4
Ejemplo
Home page
✤ About
✤ Products
✤ Events
✤ Contact Us
http://localhost:3000
✤ http://localhost:3000/about.html
✤ http://localhost:3000/products.html
✤ http://localhost:3000/events.html
✤ http://localhost:3000/contactus.html
M. en C. Roberto Martínez Román - rmroman@tec.mx
5
¿Cómo ayuda el router?
✤
El router nos permite de nir rutas para cada sección del
sitio (aplicación).
✤
Cada ruta es un endpoint que puede escribirse en la barra
de direcciones del browser.
✤
Cuando una ruta es solicitada, mostramos el contenido
correspondiente.
M. en C. Roberto Martínez Román - rmroman@tec.mx
fi
6
Páginas
✤
Escribimos un archivo que exporta todas las páginas que
vamos a ocupar.
✤
En una app real, cada página está en archivos diferentes.
✤
Puedes descargar el archivo en esta liga.
M. en C. Roberto Martínez Román - rmroman@tec.mx
7
Agregando el Router
✤
Modi camos el archivo index.js para que toda la app este
contenida en este elemento.
➡
M. en C. Roberto Martínez Román - rmroman@tec.mx
fi
8
Configurando las rutas
✤
En App.js con guramos las rutas de la app.
✤
El contenedor de todas las rutas que necesitamos de nir
es Routes.
✤
Dentro de Routes, agregamos un componente Route para
cada página.
M. en C. Roberto Martínez Román - rmroman@tec.mx
9
App.js
M. en C. Roberto Martínez Román - rmroman@tec.mx
fi
10
Cargando cada página
M. en C. Roberto Martínez Román - rmroman@tec.mx
11
Ligas en el router
✤
No esperamos que el usuario teclee las ligas en la barra
de direcciones cada vez que quiere visitar una sección del
sitio.
✤
La librería react-router-dom provee el componente Link
que se usa para crear enlaces.
M. en C. Roberto Martínez Román - rmroman@tec.mx
12
Link
✤
En Home, agregamos ligas a las otras páginas.
➡
M. en C. Roberto Martínez Román - rmroman@tec.mx
13
Página no encontrada
M. en C. Roberto Martínez Román - rmroman@tec.mx
14
Páginas (rutas) anidadas
✤
Supongamos que tenemos la siguiente estructura:
Home page
✤ About
➡ Company
➡ History
➡ Services
✤ Products
✤ Events
✤ Contact Us
http://localhost:3000
✤ http://localhost:3000/about
➡ http://localhost:3000/about
➡ http://localhost:3000/about/history
➡ http://localhost:3000/about/services
✤ http://localhost:3000/products
✤ http://localhost:3000/events
✤ http://localhost:3000/contactus
M. en C. Roberto Martínez Román - rmroman@tec.mx
15
Páginas
✤
Agrega a Pages.js los componentes History y Services.
M. en C. Roberto Martínez Román - rmroman@tec.mx
16
✤
Ahora podemos anidar las rutas en About.
➡
✤
Prueba las rutas about/services y about/history
M. en C. Roberto Martínez Román - rmroman@tec.mx
17
Desplegando contenido
✤
http://localhost:3000/about/history
➡
M. en C. Roberto Martínez Román - rmroman@tec.mx
18
Ejercicio. era. Parte
✤
En el componente About, agrega un menú para ver las
dos páginas (Services y History) y regresar a Home.
➡
M. en C. Roberto Martínez Román - rmroman@tec.mx
19
Ejercicio. da. Parte
✤
Construye un menú de navegación.
➡
M. en C. Roberto Martínez Román - rmroman@tec.mx
2
1
20