React Router DOM v6 | Rutas Protegidas | Rutas Anidadas | Typescript | Tailwind CSS

Опубликовано: 28 Май 2023
на канале: MonkeyWit

2,288

Si estás aprendiendo React js 💖, debes saber que las RUTAS son parte esencial de casi cualquier proyecto de React. En este video te muestro cómo configurarlas DE MANERA PROFESIONAL usando REACT ROUTER DOM.

🏅 Al finalizar este video podrás haber aprendido no solo a crear rutas con React Router DOM, sino también a agregar layouts por ruta, crear rutas anidadas (nested routes), rutas protegidas, guardias, lazy loading, y el uso de hooks como useLocation y useNavigation.

💚Y si eres parte del 1% que lee esta descripción.💚 Déjame un comentário con un monito 🐒 y pongamos a los Monkeys de moda.

Además, aquí 👇 te recomiendo otros videos que te ayudarán a tornarte un verdadero 💪 CRACK FULL STACK del desarrollo:

React & Redux Toolkit:    • React & Redux Toolkit - Bases y proye...
API REST con Node js & MongoDB:    • API REST, Node js & MongoDB Atlas, Ex...
API REST con Nodejs & MySQL:    • API REST con Node js y MySQL | CRUD |...
Setup de Node js & Typescript:    • Nodejs Typescript Setup | Eslint | Pr...
Vue js práctico para principiantes:    • Vue js para principiantes | Proyecto ...

✅ LINKS:
Repo del proyecto: https://github.com/monkeywit/React-Ro...

🎯 SUSCRÍBETE A NUESTRO CONTENIDO: http://bit.ly/35PxZE0

💬 SÍGUENOS EN NUESTRAS REDES!!
Fcebook:   / monkeywit
Instagram:   / monkey.wit
GitHub: https://github.com/monkeywit

0:00 Intro
0:39 Creando proyecto de React con Vite
9:43 Instalando y configurando Tailwind CSS
14:18 Creando componente de navegación (Navbar)
24:42 Instalando React Router DOM
26:30 BrowserRouter, Routes y Route
36:00 Páginas y lazy loading
41:45 Layouts
48:34 Rutas anidadas (Nested routes)
1:02:06 Rutas protegidas
1:11:34 Componente Link
1:13:30 Hook useLocation
1:16:48 Hook useNavigate