📚 Tutorial de React Router 6 desde cero

[@cristianalexisorozcobenjum9476]

Algunas notas para mi yo del futuro: 9:43 diferencia entre react-router y react-router-dom 19:17 Componente vs Elemento 28:20 Empujar url en el history 40:33 Rutas anidadas 1:06:16 Navlink 1:16:12 useRoutes 1:21:26 useAuth - Ruta protegidas

[@itzellopez8509]

Gracias Christian del pasado

[@AR7editing]

Gracias Cristian crack

[@carsdfj]

Cristian del futuro tienes que saber esto, Cristian del pasado fue un crack haciendonos este indice!!

[@07cesarjoelgonzalezoliva31]

Gracias 😁💪🏼

[@desk6173]

Gracias xd

[@peter_gs]

sos un crack! despues de todo lo que uno hace en el dia a dia, tener ganas de sentarte a compartir tus conocimientos es realmente admirable! abrazo grande desde Argentina!

[@davidwilsoncruz9258]

me habia trabado en una boludes, pero gracias a tu video y tomando la merienda, me di cuenta que me olvide importar el link jajajaj, agradezco que me alla olvidado, por que por mas que dure mucho el video, me siento como que estoy en el colegio, hablando con gente mientras, prefiero videos asi, que videso resumidos en 10 min, y ver en que te equivocas y contar lo que usualmente hace alguien con experiencia, te ganaste un suscriptor =)

[@standardio8270]

Tienes una habilidad sorprendente para explicar conceptos. Se te da muy bien. Gracias por el contenido.

[@davidayala2150]

Justo estaba estudiando react router 6, que buen timming gracias midugod

[@incahoperrs]

x2

[@jeancarlomorales4496]

X3 xdd

[@oscaralvarez429]

X4

[@monimakl1107]

x5

[@guzman6001]

Gracias por explicar las cosas de manera basica. No todos somos expertos.

[@giancarlofranco7099]

Que buen video, yo hasta ahora entrando en este mundo y se entiende bien...

[@kevinsin94]

Midu, me has llegado horas tardeeee, justo hace dos noches estuve pegándome para hacer un Guards o RouteProtected!!! 😅 Gracias por tus vídeos, me has ayudado mucho para empezar con React, y sobretodo con tu código, tan fácil y entendible.

[@JRCode97]

Es impresionante toda la soltura que has ganado con el tiempo midu, se nota en los videos actuales, eres un grande

[@Weagle1337]

1:31:00, exactamente, estoy haciendo un proyecto para la escuela, y al momento de editar algo, le paso el objeto seleccionado al formulario para que ya se setee la informacion ahi, sin hacer fetch ni nada para obtener los datos de ese elemento, muy util y rapido la verdad, ya que trabajas con la informacion que ya cargo. PD: y en el stream no lo entendendian por que a lo mejor jamas lo habian visto yo creo xD

[@genecles]

Gracias por el video. Como siempre genial!!! Gracias a tu explicación del useLocation pude resolver un problema que tenía donde si estaba es la ruta "/usuario/lista" cuando refrescaba la página entonces siempre me llebaba al "/dashboard" y no entendía porque... Solo fue necesario guardar el location.pathname en el que estaba y comprobarlo en el useEffect que tengo en el AuthProvider cuando inicia la aplicación. Muchaaaaas graciaaaaaaaas desde Valencia. Saludos.

[@isaacgonzalez2128]

Buno gracias por compartir tus conocimientos, esto me ayuda mucho para continuar con React Native

[@jocelynda6]

viendo donde estaba mi error por que se me renderizaba una "s" en todas las paginas jaja y era esoooo gracias midulive!

[@cuaticito]

Muchas graciasss por este video .. gracias por compartir tus conocimientos, espero algún día poder compensarlo ... saludos desde Argentina!!!

[@hernanarica6389]

wow midu, desde hace poco que te sigo y la verdad que sos groso

[@Jdbluesky]

Eres el mejor!!! anhelo ser como tú!

[@n4h92]

Miduuu tremendo video te has mandadado!

[@leonisocamponieves8941]

Buen video. ¡Muchas gracias!

[@terere_dev3485]

Fuaaa estos dias estuve buscando a full este video!!!

[@AlguienMas555]

Sos, un, genio. Gracias por todo tu conocimientos

[@valentinfeller121]

Genial. Muchas gracias ! Consulta más rutas protegidas las valido con usuario Autenticado o con si hay una sesión activa ?

[@Weagle1337]

1:35:51, basicamente una vez envuelves tu app en el browser router ya estas usando el contexto/estado global de react router, y es por esto que eso del estado es una joya, un contexto global listo para usarse, y gratis

[@xGasPer]

No puede explicar tan bien midu, que ser maravilloso 🛐

[@alvarocampos2905]

Muchas gracias midu me sirvio un monton

[@outletshelssy]

Muchas gracias por este gran video

[@midulive]

Con mucho gusto!

[@davidticstorm4114]

Hola Midu, Wow pero que clase super cheveré te aventaste de como utilizar los routers, useParams, state, Provider..., Auth entre otros. Son muy buenos tus videos y me ha servido de gran en JS en general react y otros fundamentos de JS.

[@nemines001]

saludos muchas gracias habia estado trabajando en algunos proyectos y habia tenido inconvenientes con React Router 6 si te pones a hacer videos de dependencias tendrias material por siempre jaja

[@vitocodev]

Justo lo que estaba buscando

[@ajichyrus]

Excelente clase,tienes que hacer taller de Recoil , saludos

[@kmylodarkstar2253]

el hash router me sirvio con un problema de microfronts y webpack de cómo y dónde se compilaba entre la versión local y la versión prod, también siempre está bueno pensar qué cosas van en el router o qué cosas se pueden hacer por estados en un falso router y todas esas combinaciones.

[@jamj4199]

pues la verdad es que lo había leído sobre react router por hay pero no lo he aprendido por que aun soy nuevo en esto pero bueno. Por cierto voy a probar woter en un proyecto que estoy haciendo

[@jaiderperez8426]

ayer me acoste tarde buscando un buen tutorial

[@piterxusDev]

¡Hola! Estoy intentando levantar mi primer proyecto, motivado por tu curso de FullStack y la necesidad de avanzar para obtener mi título de grado. Tengo el backend con express, base de datos MongoDB y frontend con React, comunicándose estos con graphQL. Además en un entorno Webpack. Empiezo ahora a pelearme con React Router. El problema es que desde links en cliente me redirecciona sin problemas, pero al introducir manualmente las rutas o refresco recibo Cannot GET. Comprendo que es porque ese enrutamiento se maneja desde el backend pero ¿cómo configuro en express las rutas estáticas para evitar este error? Revisaré los apuntes que tomé de tu curso Fullstack y fijo me veré este también. Pero ¿puede alguien confirmarme si se trata en el vídeo este tema y en qué momento? ¡Gracias por todo tu contenido que es una gran ayuda para tod@s las que nos acercamos a este maravilloso (aunque a veces, frustrante) mundo

[@piterxusDev]

Solucionado añadiendo a la configuración de Webpack: devServer: { historyApiFallback: true, // Habilita el enrutamiento basado en historia }

[@soyjonathan.]

Recuerdo haber visto esto en Twitch hace 86 años

[@clexyt249]

actualmente 87 😂

[@LeitoInoue]

Es espectacular este tutorial, gracias

[@Pathles5]

eres una maquina, gracias

[@carliosogaming9604]

Midu: Hoy vamos a hacer una app muy sencilla solo como ejemplo para aprender react router Midu: Vamos a crear amazon desde cero

[@oscarmelchorgalan3092]

Fantástico, muchas gracias.

[@sleon4]

Buen día, Que plugins tiene instalados para el desarrollo con React??

[@pablotruffa588]

Excelente video! Me saque muchas dudas :) gracias!

[@christophercarnavele9208]

buenas tardes midu,me encanta tu contenido muchas gracias

[@ivangonzalez823]

No estaria mal que hicieras un directo de esarrollar una red social con React, redux , tailwind, node js y express

[@juanjoo17]

Siguiendo el video y probando el código he visto que necesitamos envolver la App con el AuthProvider, sino no encontrará las propiedades, como por ejemplo, isAuthenticated. Cualquier opinión referente a esto es bienvenida

[@aubo155]

Gracias Crack!

[@levelapo]

14:02 Es probable que diga "no se esta usando" por que no lo esta utilizando como funcion de javascript, mas bien lo esta cargando como funcion tipo objeto (html) (estoy hablando sin saber, entiendase)

[@fernandobenitez2330]

Grande

[@ricko13]

✨ mencanta ✨

[@ricko13]

kzbin.info/www/bejne/n4GxpWRofsmVebc

[@javiergarciafillol4454]

Gran video

[@ferbass100]

Gracias!!!

[@jibleg]

HashRouter es correcto usarlos?

[@alvaronavarro2610]

HashRouter esta orientado a app verticales con cierta peculiaridades, donde se despliega en una ruta de la app base

[@tupacamarull1994]

Yo me imagine a Michael Jackson en Neverland rodeado de niños xD

[@davidzuccarini8376]

midu puedes hacer un video de la ultima parte autenticación sencilla pero aplicando a esto firebase como tomar diferentes login con diferentes usuarios como pasa las pantallas a los diferentes usuarios, muy bueno tus videos

[@OmarBarra-tj8xz]

buenisimo gracias, pero xq no usar "createBrowserRouter"?? cual es la diferencia entre createBrowserRouter y Routers?

[@andresfelipearboledalondon268]

Crack

[@midulive]

🤗

[@sergiocontreras9519]

Que tema usas en tu visual? gracias

[@antfun8784]

1:32:48 midu cabreado :v de lo mejor xd

[@hernanarica6389]

El objeto state de Navigate solo funciona con Navigate? Porqué generalmente usamos link para redireccionar

[@andersonalmeydat7715]

Midu buen video, me estas ayudando aprendiendo react, hice una app con react router con tu video pasado, pero tuve problemas al colgarlo en mi host, cuando se refresca o pasas un link de un directorio marcado x react router dice not found, que me falta hacer? o que mas debo implementar capas tu tienes una salida fácil a mi problema Midu te lo agradeceria mucho!

[@GusGabriel]

Master!!!

[@eduardoserrano5476]

Hola guapo, me sabe mal solo venir a preguntar cosas irrelevantes del vídeo, pero que terminal estás usando ?

[@jesussoto7463]

Saludos desde Venezuela. Puedes hacer un vídeo parecido pero utilizando clases en vez de funciones?

[@jhoubu]

Bro ya para React las clases no van, a menos que sea por mantener un proyecto viejo.

[@psicodelico6]

Desde hace 20 años que tendria que existir React Router.

[@midulive]

Antes incluso que React 🤣

[@juanpabloduette2731]

Hola, cuando hago la función que entrega un Element, me arroja lo siguiente: Type annotations can only be used in TypeScript files.ts(8010). Me podrán ayudar? Inicié el proyecto para React. Gracias.

[@stanleyfeliz1498]

Que extensiones usas ?

[@bawual9223]

Porque tu elemento lleva dos puntos ? const Home = () : elemento => Home

[@christophercarnavele9208]

una duda si tengo un router con las siguiente rutas: home/perfil/galeria ,donde home es la default ,porque si navego a perfil y recargo me pasa a home y no se mantiene en pefil?

[@esloanjimenez6115]

y a hora como se hacer, para hacer la funcionalidad que asia Switch? Es decir que cuando no encuentra una pagina ir a la pagina que nosotros deseamos?

[@luiggymacias5735]

Vale la pena aprender react router si uso next.js?

[@rogeclash2631]

hola Midu tienes el codigo en git hub?

[@marccmartian]

1:02:27 Custom NavLink

[@edinsonbolanos7971]

10/10 :D

[@nachetons]

Hola midu buen video, una pregunta podrias hacer un tutorial haciendo un CRUD usando firebase, con la base de datos de Realtime Database, es que recientemente hace 1 mes o asi, la actualizaron cambiando los metodos en version web 9 y me siento muy noob utilizandolo

[@jhoubu]

Bro revisa hay varios videos sobre actualización, revisa los de Fazt.

[@alexisantoniojimenezjoaqui6776]

Profe una pregunta, tengo una vista pública y privada, por ejemplo quiero ver el detalle de una publicación, pero me pide q m ligue, entonces me logueo, pero no me manda a la vista del detalle si no al Home de la privada.. que puedo hacer?

[@franciscojavierpalencia7682]

Estoy haciendo una página utilizando react router y me muestra las rutas en blanco

[@placisalo]

buenas hay alguna forma de crear un menu de rutas teniendo los elementos en una base de datos para no tener que modificar el menu y solo pegar el componente en una carpeta??

[@GalurkYT]

En México se dice que los mexicanos nacemos donde queremos, si tu te sientes mexicano eres mexicano

[@bastiandiazpalacios9580]

eso lo dicen en todos los paises

[@messismo10]

esa es la mayor mamada que he escuchado.

[@stanleyfeliz1498]

tienes cursos en udemy?

[@nahueljimenez9294]

Hola bro buenas tardes, estoy teniendo un pequeño problema con mi proyecto, mira yo hice una app, donde tengo en mi App.js dos componentes Header.jsx y Footer.jsx en el footer tengo todas las rutas de mis 5 secciones home .... etc el problema que estoy teniendo es que cuando hago scroll en cualquiera de estas 5 secciones me hace scroll en las otras y al pasar de una seccion a otra y quiero ver la informacion me aparece en la posicion donde deja la info de la seccion anterior, como puedo solucionar esto.? que cuando vvaya a la seccion que sea apareszca toda la info desde una posicion 0... agradezco sus colaboraciones

[@mytvhome7394]

Cuando no usarias HashRouter y cuando no BrowserRouter?

[@soycmramos]

14:43

[@rana_zurda]

Algunas notas para mi yo del futuro: Navlink 1:06:16 a 1:12:21

[@rubenortiz6576]

Hombre, muy bueno tu vídeo pero necesitas colocar la línea de tiempo porque es sumamente doloroso buscar la información que uno está buscando así. Saludos.

[@jcorjuela3247]

Ok, pero necesito ayuda, el react-router crea los enlaces, pero para cambiar de página, pero yo tengo esto: function App() { return ( ) } y en el componente NavBar tengo los enlaces, pero aún no sé cómo hacer para que los enlaces me lleven a la sección de la página de su respectivo enlace (es un portafolio y no quiero tener que separar cada componente en una pagina diferente) !!!!!AYUDA¡¡¡¡¡

[@ronny5780]

Tengo un problema con react router dom en producción, cuando recargo mi pagina me da un 404 como si no encontrara la ruta como se puede solventar este problema

[@xGasPer]

Alguien sabe por que midu tapa el chat de twitch aca en youtube?

[@julianmagra]

Midu. Tengo un codigo muy sencillo en el que quiero usar un Link y no redirige, de hecho, no renderiza cuando coloco el link. Sabes que puede ser?

[@carlosa.lermaramirez2580]

porque corta lo de auth

[@rosapety90]

Al principio, Element me sale subrayado en rojo y no puedo hacer nada porque da error, ¿por qué es?

[@bosphoramus]

hola, alguien sabe como mostrar los errores de eslint inline como le salen a el? y el autocompletado en el popup que le sale en iTerm2?

[@07cesarjoelgonzalezoliva31]

Una duda. Alguien sabe por qué cuando ya tengo mi carpeta build y la levanto con live server. Sucede que todo esta bien, sin embargo si yo decido entrar directamente a una ruta, por ejemplo animales/koala. Esto me tira un error Cannot Get animales/koala

[@danii5923]

Es problema del hash

[@demian.succs0]

@@danii5923 no, no es problema del hash, lo que pasa es que el live server trata de hacer una peticion GET a esa URL y por eso falla, al final RRD no crea las peticiones para cada ruta sino que "simula" estar en dicha URL, una solución sencilla es crear un servidor usando express y NodeJS y decirle que en todas las rutas reenvie el archivo index.html de la build, rapidamente algo así: app.get('/', (req, res) => res.sendFile('ruta/hasta/carpeta/build/index.html'))

[@albertofranjul6493]

Me podrias dar un listados de los plugins que usas en visual code por favor.

[@yonatanrodriguez5100]

Alguien sabe como solucionar este error ?? Uncaught Error: You cannot render a inside another . You should never have more than one in your app.

[@cristianroldan337]

Hubo un grsn corte en el minuto 1:21:27 ??

[@gonzalo_dev]

cuando un tuto sobre la version 6.4 estyo confundido :C

[@ricksanchez-mm9ei]

es lo mismo, nomas tambien se puede hacer con el metodo createbrowserrouter

[@sarudev]

Por qué el chat estaba censurado?

[@Weagle1337]

Le ofrecian nopor

[@jorguetorres2908]

el useNavigate ya no funciona, estoy usando react 17

[@xdiegotorres7194]

:D

[@danielcarcamomartinezdanie5855]

este proyecto esta chido midu que opinas de windows en el navegador que este hombre a hecho kzbin.info/www/bejne/nZamf5yAo9xrn6c

[@galiprandi]

Hacer test con wouter es horrible 😂