Curso React: 61. React Router: Rutas privadas - jonmircha

En este video te explico como podemos crear rutas privadas con React Router.
⚛️ Curso React - • Curso React.js
💛 Aprende JavaScript - aprendejavascr...
🔵 Curso Webpack - • Curso de Webpack - jon...
📖 Mis notas sobre React jonmircha.com/...
📦 Códigos: github.com/jon...
🔵 Documentación ReactRouter - reactrouter.co...
🎥 VIDEOS RECOMENDADOS
🟣 Instalando Git - • 🤯😱 Usa la terminal de ...
🟣 Instalando Node - • Instalación de Node.js...
🟣 Instalando NVM - • Múltiples versiones de...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame con una Donación jonmircha.com/...
📫 Suscríbete a mi lista de correo tinyletter.com...
#React #Reactjs #ReactRouter

[@signo18]

para el que le interese V6: const PrivateRoute = ({ component: Component }) => { return auth ? : ; };

[@jonmircha]

😉👋🏻

[@gonzalozerda2621]

te amo bro!

[@AlexisPizarroAbarca]

Muchas gracias por eso no me funcionaba

[@julianjv1]

Gracias Pedro. Todo una noche buscando una solución

[@emersontavera9362]

Gracias, si me intereso xd

[@cuaticito]

Muy buen curso profe, necesitaba aclarar cuestiones de React Router. Vi y leí muchos tutoriales, pero su explicación es una de las mejores. Le agradezco por compartir sus conocimientos.

[@jonmircha]

😉👍🏻

[@addevmoises]

Muy excelente video, eso de agregar alias al desestructurar las props es genial, excelente video de la simulación de rutas privadas

[@jonmircha]

Muchas gracias!

[@jesuslopezrodriguez2497]

que maravilla Jhon mircha, todo lo explica a detalle , no da nada por echo y lo deja todo clarisimo siempre con ejemplo practicos

[@jonmircha]

👋🏻😉

[@lalojejeje]

Este curso como los demas de JonMircha, son oro liquido!!!... Jon Jon Jon!!!...

[@jonmircha]

😉👋🏻

[@r.w.s.2402]

Siempre se aprenden cosas nuevas en todos tus vídeos. No tienen desperdicio:)

[@jonmircha]

Gracias! 😊

[@josearmandozeballosduran7086]

Likeado, Suscrito y Compartido... Excelente explicación, por mucho la mejor que encontré.

[@jonmircha]

Gracias, saludos

[@cristianfarace4402]

Tremendo tip ninja tiraste, sos un genio

[@jonmircha]

😉👋🏻

[@conelecphp7751]

Bien Profe Jon por la explicación de las rutas privadas!!!

[@jonmircha]

🤓👍🏻

[@sathonyNakamotolml]

Excelente profe, buen explicación!

[@jonmircha]

😉👋🏻

[@palmira661]

Es increible como se simplifica en la v6 de react-router. Jon lo explicaria en 3 videos jaja. Excelente curso profesor 🤓

[@jonmircha]

👍🏻

[@francovedia5584]

gracias, a seguir aprendiendo.

[@jonmircha]

Con mucho gusto

[@Wiiiiizard]

🧙‍♂muchas gracias!!!

[@jonmircha]

Gracias por ver

[@luisangel8781]

Despues de 10min de leer decumentacion la nueva version me salio asi : En conceptos basicos creas la variable auth antes del return: let auth; auth = true; auth = null; Luego en las rutas:

[@jonmircha]

😉👍🏻

[@martinfernandez9644]

Al mismo tiempo podriamos hacer una PublicRoute para implementar lo mismo a la inversa, si estamos logeados y queremos ir al Login que nos lleve al Dashboard :) Execelente video y curso Jon, mis aplausos.

[@antonywyatt]

eso tambien queria saber como lo haria?

[@jonmircha]

Sí, se podría, pero no le veo mucho sentido pues, el Route ya es público

[@martinfernandez9644]

@@jonmircha Claro, pero me referia a que si ya estas logeado no te muestre el login (porque ya estas adentro) y te envie a tu perfil. Incluso los links que te llevan tambien se podrian ocultar (siempre hablando en un proyecto)

[@jonmircha]

🤓👍🏻

[@instintoimagen]

Excelenteexplicacion!

[@jonmircha]

😉👋🏻

[@montotox]

Muy buenas explicaciones!! Muchísimas gracias por compartir esta información 💪

[@jonmircha]

😉👍🏻

[@estebanoctaviopavezllanca2385]

Muchas gracias

[@jonmircha]

de nada

[@heimancastro1954]

para el que le interese V6: cambie la variable prop llamada component a private para no tener la confucion de element con component el resto es todo lo que ha explicado el maestro en el Roter.js _________________________________________________________ en PrivateRoute.js const PrivateRoute = ({private:Private }) => { return auth ? : ; };

[@jonmircha]

🤓👍🏻

[@elcucvo]

excelente profe el mejor

[@jonmircha]

😉👍🏻

[@daveku]

Excelente, muchas gracias!!

[@jonmircha]

De nada!

[@AllanTorresBass]

Muy bueno profe!!!

[@jonmircha]

Hola, muchas gracias

[@emersonpalaciootalvaro2632]

excelente gracias

[@jonmircha]

🧔🏻✌🏻

[@AngelSalazar-uf5fk]

Excelente clase amigo jon, estoy trabajando con los subsistemas internos de una organización, sé que esto es una prueba porque tendríamos que tener un endpoint por dar un ejemplo el laravel que haga el verdadero proceso de login... pero entonces así sería más o menos como podríamos (desde el frontend) validar un usuario de manera profesional ?

[@jonmircha]

Sí

[@Angel-wy4nw]

Toma tu likeeeee, me ayudaste bastante!!

[@jonmircha]

De nada

[@tenjo6669]

Buena explicación Jon, Gracias

[@jonmircha]

Con gusto

[@elbertjosesalasbrochero6318]

Seria bueno hacer consulta una api y hacer toda la logica de validacion y sumarle lo que hiciste.

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@d-landjs]

Excelente maestro!!! Espero lograrlo en el V6 xD

[@jonmircha]

👍🏻

[@dariooliva2618]

Una pregunta Jhon, como seria la validacion si quiero acceder al dashboard validando que ya exista el usuario y que además el email ya este validado? y si no esta validado el email que redireccione a una pagina indicando que mire su correo

[@jonmircha]

Lo de comprobar el usuario sería más bien del lado de tu backend y lo de el email valido con una expresión regular

[@dokialbon6690]

Un proyecto de react con laravel, inicio de sesión y rutas privadas eso estaría de grandes aquí 😅

[@hernangarcia77]

hola jon, pasando la prop component en mayusculas tambien funciona sin usar el alias, es una mala practica hacerlo asi o trae algun problema? Saludos!!!

[@jonmircha]

No pasa nada simplemente usa los formatos y prácticas que usen en tu equipo de desarrollo

[@edwina.espinaltaveras4222]

Estuve viendo tu código y vi que importabas Link, Redirect de 'react-router' y no 'react-router-dom' es lo mismo solo que simplificado??

[@curiosoelgato]

Hola Profe, una consulta, hoy en día no se utiliza Redirect en la V6, con Navigate lograríamos los mismo ?

[@jonmircha]

Revisa los cambios en la nueva versión

[@cgope]

Hola! si, puedes hacer lo mismo con Navigate que es quien reemplaza a redirect en la v6

[@Ily.___]

Hola Jon! Como hago para poner dos componentes concatenados en una ruta ?

[@jonmircha]

Usa etiqueta de apertura y cierre en la Ruta

[@Ily.___]

@@jonmircha Genial, gracias Jon

[@elbertjosesalasbrochero6318]

Jon cono hariamos para guardar sesion para no repetir ese proceso en cada componente y para destruir la sesion .

[@jonmircha]

Usando localStorage o sessionStorage

[@tavo87gus]

a alguien le salio con la version 6? 😅 me esta volviendo loco esto del cambio de versiones jaja

[@tavo87gus]

ya lo solucione XD se simplifica bastante con la version 6, me quedo asi: el priveteRoute: import React from 'react'; import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoute = () => { let auth auth = true // Si está autorizado, devuelve una salida que generará elementos secundarios // Si no, devuelve el elemento que navegará a la página de inicio de sesión return auth ? : ; } export default PrivateRoute; El componente Este elemento es usado dentro del componente declarado en la ruta padre para renderizar sus elementos hijos. Esto permite a la interfaz anidada mostrar las rutas hijas cuando son renderizadas. Si la ruta seleccionada es la raíz, se renderizará la hija. Si la ruta no está mapeada, se renderizará la hija. en el componente de conceptos basicos quedaria asi

[@jonmircha]

👍🏻

[@luisangelfernandez3225]

@@tavo87gus Muchas gracias amigo, ya me estaba rompiendo el coco tratando de resolverla jajajaj

[@lucianoyacob1396]

Graciaas!!! Tambien estuve leyendo y si las rutas son las mismas puedes remplazar el "path" por "index". Por lo que el componente de conceptos básicos quedaria asi Ya que llevaría a la misma ruta del padre

[@benjaminquattrocchi9841]

Graciasss crackk!! Me re safaste encima explicaste la funcionalidad componente Outlet ... 😃

[@heimancastro1954]

seguimos 🤑

[@jonmircha]

👍🏻

[@cristianfarace4402]

con la ultima version ahora quedaria asi import React from 'react' import { Navigate } from 'react-router-dom'; const PrivateRoute = ({ component: Component }) => { let auth = false return ( auth ? : ) }; export default PrivateRoute y

[@jonmircha]

👍🏻

[@jovahinrivera9484]

pregunta aun sirve para version v6%%+++

[@mateorodriguez785]

gracias :3

[@mastermaster153]

auth = true; auth= null; por qué 2 veces se cambia el valor de 'auth'? 🤔🤔se supone que con uno solo funciona no?

[@phpitpatagonia]

Claro, solo lo puso para ir probando con uno u otro valor como ejemplo

[@manoloexplaintome6348]

Buff me instalé la versión 6 (la actual) y todo cambia. Llevo un cacao tremendo...

[@jonmircha]

instala la 5 haz los videos y luego revisa la 6 😉

[@manoloexplaintome6348]

@@jonmircha Gracias Jon. Al final como soy un poco cabezón he conseguido hacerlo funcionar.

[@d-landjs]

@@manoloexplaintome6348 Como te salio amigo D:

[@TheMiguelon2109]

Hola profe tengo un problema, si estoy ocupando context para el manejo de mi estado. Al iniciar la aplicación tengo un useEffect que realiza una petición a mi backend para verificar si estoy logeado o no, la cosa es que al intentar entrar a una ruta privada por url, o actualizando, esta me saca de ella ya que al iniciar la app logged es falso, pero al segundo render ya carga a verdadero, que podría hacer en estos casos para esperar a este llamado al backend?

[@jonmircha]

Puede ser una opción

[@ilusiones4665]

Hola jonmircha, estoy intentando dar un alias a un componente en react 18 "component: Component" que recibo por props para darle animaciones con css dinámicamente y retornar ese componente pero obtengo un error! " React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component? " ¿Cómo puedo hacer esto?, excelente contenido!

[@jonmircha]

😮 revisa la doc

[@oscarmichelosambelagonzale6799]

No entiendo para que sirven las rutas anidadas, osea para que se pueden emplear.

[@jonmircha]

Para hacer navegación vertical con subsecciones

[@KevinAlvaradoZaraza]

@@jonmircha Profe una duda ,tengo que hacer un proyecto donde estudio. las rutas anidadas me pueden servir para lo siguiente? hacer un sistema de login, además el proyecto es de control de inventario- usuarios-stock etc, una vez logueado tengo pensado hacer un meno de navegación lateral pero que al darle a las opciones solo carguen los item y no se refresque el menú, es buena idea implementarlo ahi?

[@alvarohernanuseche4051]

🥸🥸

[@jonmircha]

👋🏻😉

[@elcucvo]

me atrase 3 semana profe :(

[@jonmircha]

No pasa nada, ve a tu ritmo 🤓👍🏻

[@davidoreiro9475]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉