Curso React: 62. React Router: El problema de las rutas en producción 😱NADIE TE DICE ESTO🤯-jonmircha

En este video te explico como funcionan en producción las rutas creadas con React Router y algunas cosas importantes que debemos considerar al desplegar nuestras aplicaciones, para evitar recursos inexistentes.
⚛️ 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

[@DavidTG7]

Grandioso. Precisamente me acabo de encontrar con este problema del routing en produccion. Gracias por la enseñanza!

[@jonmircha]

Con mucho gusto

[@joaquinsarmiento7361]

Como siempre impecable Jon. Sos un genio! Ojala este contenido se haga aún mas conocido, formacion de calidad.

[@jonmircha]

Gracias 🤗

[@znack3131]

Amigo muchas gracias, ya me estaba rindiendo con este problema, suscrito.

[@jonmircha]

👋🏻😉

[@all-eter-4289]

Master justo tenia ese problema y me costo mucho encontrar este video jajaja pero ahora lo enteindo todo 🤯🤯🤯. Muchas gracias! y es cierot casi nadi dice eso .

[@jonmircha]

Con mucho gusto

[@col_yom]

Gracias por la explicación, si tenia esa inquietud al pasarlo a proudccioón y acualizar dicha ruta generaba ese error

[@jonmircha]

😉👌🏻

[@maduenox]

wow, se aprecia bastante este tipo de consejos, aún no he hecho nada "real" con react, sólo prácticas y ejercicios que se quedan en mi equipo, pero que bueno es saber esto. Gracias !

[@jonmircha]

😉👍🏻

[@bryanrichardi7160]

Eres la unica persona que explica tan bien estos pequeños detalles, justo tengo este problema, espero encontrar la solución con tus videos, tienes un nuevo sub fiel a tus videos. Gracias por tanta excelencia y calidad en tus vides.

[@jonmircha]

👋🏻😉

[@josemanuelariashernandez6604]

gran video excelente, justo acabo de cometer ese error en vercel y me preguntaba el porque no aparecian las rutas, gran explicacion

[@jonmircha]

Excelente!👋🏻😉

[@admoises]

Excelente video, muy buen detalle esto de las rutas en producción, ya que siempre al desplegar las apps hay problemas y esto de valioso, muchas gracias por este contenido.

[@jonmircha]

😉👍🏻

[@carlossarochar9711]

Jonathan. Excelente curso. Me está ayudando mucho en mi incursión en el mundo de React. Muchas gracias!!!

[@jonmircha]

😉👍🏻

[@arielcastillo7925]

Gracias! justo tenia ese problema, desplegue mi app y me di cuenta de ese error, le agregagaba "/*", etc, y no funcionaba. Investigue y me encontre con este problema. Y de paso con este video que por cierto, ya te conocia! Ahora quiero ver que puedo hacer en el server, o hago el hash y no me hago tantos problemas

[@jonmircha]

😉👋🏻

[@TodoEST4EnLaMente]

Muchas gracias Jonmircha; me gusta mucho aprender con usted. La solución básica que siempre le he dado a ese problema usando Angular o React es simplemente en el router del Backend poner un '*' si es en NodeJS y listo, ya siempre responde y se corresponde con el router. Espero haberme dado a entender.

[@jonmircha]

😉👍🏻

[@RonnyIsrael]

No. Y estoy con ese problema, por favor explícalo. Además estoy usando por ahora ip pública , no dominio.

[@AllanTorresBass]

Gran detalle Master!!! Excelente

[@jonmircha]

Muchas gracias!

[@chiky22lp]

Creí que al hacer el npm run build no me funcionaba bien, porque al abrir el index.html me mostraba la página en blanco. Pero ahora pude ver la app abriendo la carpeta build en otra ventana del visual con el live-server, como bien explicas. Muchas gracias!

[@jonmircha]

👋🏻😉

[@nicolaspallares5049]

Excelente video ! Gracias Jon !

[@jonmircha]

Con gusto

[@enzofrias1367]

execente jon! muchas gracias!!

[@jonmircha]

Con gusto

[@dragonnegro4413]

Gracias, por tu tiempo y dedicación desde Canarias

[@jonmircha]

Con mucho gusto

[@agusoteras]

Nuestro idolo una vez mas marcando el camino

[@jonmircha]

🙈🙌🏻

[@AngelSalazar-uf5fk]

Yo creo que te entendí en este video, con estrategia del lado del servidor te refieres a por ejemplo en php... preparar el htacces para este tipo de eventualidades ?

[@jonmircha]

Sí

[@darius1751]

Wow, Excelente video

[@jonmircha]

👍🏻

[@luisenriquezamoraglez3124]

Gracias por el tiempo que nos dedica, los cursos son excelentes. Le pregunto ¿Sé puede hacer ciencia de datos con Java Script?

[@jonmircha]

Hay librerías como tensor flow, pero creo que el lenguaje adecuado para ello es Python

[@ayrtonnahuel6042]

Buenas! No entiendo como solucionarlo todavía, hiciste un video sobre eso?

[@tincho6266]

Hola que tal disculpa las molestias pudiste solucionarlo?

[@sebastianhernandez4611]

Muy buena la explicación! Voy descubriendo este canal, está excelente el contenido.

[@jonmircha]

Muchas gracias!👋🏻😉

[@marsdev6592]

Muchísimas gracias profe. Esa era mi super duda al empezar con React Router Dom :D

[@jonmircha]

Con mucho gusto

[@CynthiaRomero]

Justo esto me hace falta en este momento. Muchas gracias por la explicación detallada.

[@jonmircha]

😎👌🏻

[@francovedia5584]

gracias profe, video nuevo = conocimiento nuevo.

[@jonmircha]

😎👍🏻

[@diegorangel4154]

Profe antes que nada muchas gracias por este espectacular curso. Sin embargo me gustaría preguntarle si está pensada en una actualización con el tema de react router v6. Saludos🙏

[@conelecphp7751]

muy buena la explicación .... gracias profe Jon!!!

[@jonmircha]

😉✌🏻

[@leonardodavidmartinezherna1610]

Super clara tu explicación y justo llegué a este video porque me encontré con este problema intentando usar react router dom hahahaha, ya entiendo cual es el problema ahora debo trabajar en el back para que me arroje la información en la ruta deseada. Muchas gracias de nuevo, ya me suscribí y le di al botón de me gusta. Saludos desde Cancun, Mexico

[@jonmircha]

🤓👍🏻

[@daveku]

Excelente, muchas gracias por toda la información que nos proporcionas… estoy pensando usar firebase para el hosting y aún no se si tendré esos detalles, pero que bueno que vi este video para comenzar prever. Saludos y excelente inicio de año

[@jonmircha]

😉👌🏻

[@takesomecoffee2363]

Sensei, hay alguna razón por la que se debería usar react-router- dom sobre el next/router? hace poco empecé a estudiar nextjs a la par de este curso y por lo que veo no hay ninguna desventaja en comparación, que opina sobre esto? 🤔

[@jonmircha]

Son dos cosas toalmente distintas, si ya estas trabajando con next siguele no lo mezcles con react router

[@LuisLopez1099llg]

Muchas gracias Jon por la explicación c:

[@jonmircha]

De nada!

[@estebanoctaviopavezllanca2385]

Muchas gracias

[@jonmircha]

De nada

[@davidzuccarini8376]

Más contenido así excelente video 🎉 muchas gracias

[@jonmircha]

Gracias. Saludos👋🏻😉

[@AngelSalazar-uf5fk]

La única forma de poder entender bien esto es saber como funciona el API location del navegador... porque si en efecto se va cambiando la url de manera dinámica... pero eso no significa que esté necesariamente cambiando de página, esas páginas "no existen".

[@jonmircha]

😉👍🏻

[@SebastianEPH]

muy tarde jhon, ahora hay que cambiar todo el proyecto XD justo es el video que necesitaba, estoy teniendo los mimos problemas que dices, y curiosamente, no hay informacion al respecto, felizmente tu video es muy bueno,

[@jonmircha]

😉👍🏻

[@ezequielalvarez3345]

después de buscar varias horas el por que.. me dijiste todo lo malo que estaba haciendo GRACIAS!!!

[@jonmircha]

👋🏻😉

[@jonnathanbaculima4447]

Gracias amigo Jon por tus conocimientos nunca habia escuchado eso..!!!

[@jonmircha]

😉👍🏻

[@AngelSalazar-uf5fk]

John una preguntica practicando se me ocurrió hacer una aplicación de inicio de sesión en la cual utilizó react-router-dom a la hora de Iniciar sesión redirección o al usuario con el objeto location nativo de javascript con window.location.hash esta bien o hay otra manera de redirigir con react router dom sin necesidad de crear una ruta

[@AngelSalazar-uf5fk]

Lapsus brutus jajajaja creo que con useHistory es lo más sensato no?

[@jonmircha]

Sí

[@PAULALEXANDERGARCIAPILCOGARCIA]

Buena información y detalles sobre el tema... me sirvió mucho

[@jonmircha]

Gracias por comentar

[@Haru-df1ms]

Gracias Jon! Esto me saco algunas dudas que tenia

[@jonmircha]

Con gusto

[@Wiiiiizard]

🧙‍♂Muchas gracias

[@jonmircha]

Un saludo

[@PROGAMERXable]

2:00 Podrías hacer un video más explicativo a como manejar las rutas o hacia donde redireccionarlas desde el backend al usar React Router?

[@jonmircha]

Eso no dependería de React sino de la tecnología que uses en el backend para hacer ruteo, así que es muy amplio si usas node y express, entonces express sería el que se encargaría de eso por ejemplo

[@anthonyreyesduran8616]

Un inmenso Like!

[@jonmircha]

👋🏻😉

[@vanhellsing3029]

uhhh tenia eso cuando desplegaba mi app y recorde este video :)

[@jonmircha]

👍🏻

[@instintoimagen]

Es el mejor #curso de #reactjs

[@jonmircha]

😉👍🏻

[@thejb9902]

Interesante, entonces el navegador detecta dentro del useEffect la peticion?... Por ej: No sucederia lo mismo si esta dentro del hook?

[@ramiroocamporodriguez8096]

muy buen contenido gracias por ayudarme en mi ruta de aprendizaje

[@jonmircha]

👋🏻😉

[@emersonpalaciootalvaro2632]

excelente gracias

[@jonmircha]

🧔🏻✌🏻

[@aviellisandrovasquezreyes1172]

agradece este tipo de consejo profe :D :D :D :D

[@jonmircha]

👋🏻😉

[@hipona21]

excelenete muy buen explicaion como se puede hacer un navBar pero con los enlaces dinamicos de un json

[@jonmircha]

usando el state

[@leoprone1]

Muy buena explicación! gracias

[@jonmircha]

👋🏻😉

[@leandro-jy7dn]

Comentando para apoyar

[@jonmircha]

✌🏻

[@BarberoPablo]

dios busque dias y no encontre solucion, gracias broo!

[@jonmircha]

Con gusto👋🏻😉

[@Elias-zn6og]

Maestro, ¿Como jr será recomendable empezar a aprender Next js a la par de react?

[@jonmircha]

Como gustes, si ya entiendes los básicos de React, adelante!!!

[@paollarce5137]

Alguien logro solucionarlo con node js?. O si hay algun video donde se explica como slucionar esto? :)

[@brandon400]

me entere de eso cuando subi una app a github y pasaba exactamente eso :$ con node js se puede solucionar?

[@jonmircha]

Sí, con cualquier tecnología backend

[@paollarce5137]

como lo solucionaste?

[@averanto]

Hola Jonathan. Exelente video y aporte como siempre. Te hago una consulta. Subi un repo de un desarrollo que realice, es un Portfolio creado con react pero no me muestra la página, me sale la pantalla en blanco. Esto a que se debe? en el index .html del build me muestra esto: You need to enable JavaScript to run this app Me dice que tengo que habilitar Javascript para ejecutar la aplicion. No entiendo nada. Te digo que he colocado en el package.json la url "homepages": "MI_URL" donde iria hospedado el repo y "predeploy": "npm run build", "deploy": "gh-pages -d build" pero no me crea bien el build al parecer. No se a que se debe esto. Espero me puedas ayudar. Saludos.

[@ICrazyDemonI]

Quiere decir que tu navegador no esta permitiendo la ejecución del Javascript y react es Javascript. Averigua la forma de habilitarlo el Javascript en tu navegador.

[@omarsamudio3418]

@@ICrazyDemonI la verdad muchas veces igual salta el error....mi tecnica es siempre ir renderizando desde donde me quede y cuando tengo ese error, investigo de acuerdo a los codigos que adicione ese dia, asi debe ser ...es la mejor forma y mas rapida

[@d-landjs]

Excelente explicación maestro, eres el mejor!!!

[@jonmircha]

Hola, muchas gracias

[@marceloloyola446]

sos un grande

[@jonmircha]

😉👌🏻

[@cumpaMira]

Muchas gracias !

[@jonmircha]

Gracias por comentar

[@relevens9829]

falto en el titulo y nadie te dira jajaja xd Gracias mircha siempre aportando

[@jonmircha]

👍🏻🤓

[@Deus-lo-Vuilt]

Muchas gracias profe , de casualidad hay alguna forma de solucionar esto, por ejemplo cuando despliego la app de react en vercel o demás y usa react router dom da este mismo error que comenta , existe la forma de solucionarlo en esos casos??

[@josejfernandez5760]

Como siempre un excelente video y contenido!

[@jonmircha]

Gracias! 😊

[@angeloruiz9344]

Muy buen video profe muchas gracias espero el siguiente video

[@jonmircha]

Con mucho gusto

[@miguelangelespinosaorganis513]

ayudaaaaa... en este momento estoy deployando una app desde aws con servidor ubuntu usando react en desarrollo, estoy teniendo exactamente este error, que deberia hacer?? uso apache

[@javierovallea3836]

gracias.

[@jonmircha]

Gracias por comentar

[@ezravazquez3795]

Gracias por compartir tus conocimientos, John! Cambiando un poco de tema... recomiendas Brave? Yo lo instalé ayer, de hecho aún no estás dado de alta en eso de apoyo a creadores pero tuve problemas al reproducir uno de tus videos, no sé si sea la pc del trabajo o porque brave quita los anuncios. Volví a Edge y siento que desde ahí puedo seguir apoyando tu canal visualizando los anuncios de youtube.

[@jonmircha]

Yo sólo lo uso para entrar a mi cuenta de bitcoins 🤓

[@kunjolee9243]

Muy bien video profe, pero tengo una duda, por ejemplo si quiero declarar las rutas en el backend, por ejemplo en express, entonces en mi backend tendria que crear la ruta y el archivo html que mostrara esa ruta?? no hay alguna forma de que desde mi backend muestre el mismo contenido de la ruta del frontend?

[@jonmircha]

Depende la arquitectura de tu backend

[@r.w.s.2402]

Como siempre, gran explicación de la importancia de tener una estrategia del lado del servidor para evitar errores en las rutas. Te quería preguntar, ¿no tienes pensado sacar un curso de Angular no? Si no lo tienes pensado, ¿tienes alguna recomendación? Gracias:)

[@jonmircha]

Lo siento no soy especialista en Angular, y no conozco un curso que te pueda recomendar

[@reyesencasualidades7906]

Se podria decir entonces que React Router es una forma sumamente berreta para manejar las rutas como realmente se debe

[@omarsamudio3418]

pues no, porque ese no es su trabajo.....

[@gpcubo4478]

Estoy realizando una app con front y backend y buscando soluciones para el manejo de rutas jaja me entero de esto :(

[@jonmircha]

😉

[@ICrazyDemonI]

Hola Jon. Estoy haciendo el build de un proyecto y subiendolo a un servidor (con Vite) y cuando entro a la url para ver la pagina en la consola del navegador me sale que no encuentra el index.js y el index.css. Esto lo soluciono editando el index.html y agregandole un punto al principio a la url que importa los archivos js y css. Pero ahora arme un proyecto con imagenes y parece estar pasando lo mismo ya que las imagenes no se cargan. Estoy buscando alguna forma de solucionarlo pero todavía no la encuentro. Aclaro que tambien uso react-router-dom

[@jonmircha]

😮🤔

[@ICrazyDemonI]

@@jonmircha Ya lo resolví. En mi caso tuve que especificar el path "./" en el package.json

[@brayanpuentesruiz4160]

GRACIAAAAAAAS

[@jonmircha]

😀👌🏻

[@baterogar]

Estoy desarrollando un proyecto en el que tengo un frontend realizado en react y el backend con una api rest en laravel, en este caso como podría solucionar el problema de las rutas? Saludos.

[@jonmircha]

Si las rutas te las genera Laravel tendrías que tener una app React por rutas, tambien podrías hacer SSR con React integrándolo a Laravel

[@angelcg635]

es muy dedundante con lo de "estrategia por el lado del servidor"

[@javiermendoza1357]

Gracias maestro estuve matandome la cabeza casi 12 horas para tratar de solucionar ese problema, y ya veo que no dependía de mi

[@jonmircha]

😉👋🏻

[@NicolasPirilo]

No se puede solucionar este tema del lado del Frontend ?

[@jonmircha]

Depende

[@rogeliosuleta2256]

Hola jonh, me quedo la duda con lo del rendering. En el caso que mostraste tendrias basicamente que tener el react y encima tambien crear cada pagina individualmente?

[@jonmircha]

Sí

[@rogeliosuleta2256]

@@jonmircha pero es normal hacer asi? porque es como que tendrias que crear "2 paginas" o no? ... saludos, soy nuevo en tu canal y me resolviste las dudas! Estuve literal toooodo un dia tratando de entender porque no funcionaba mi pagina (estoy con un proyecto de front y back) y tenia que subir mi proyecto a render y lo subia y me pásaba que yendo por el nav y cosas asi funcionaba re bien, pero si iba por url no. Y tu video fue el unico que aclaro eso. Es literal lo que "nadie te dice esto" jkajajaj GRACIAS!

[@omarsamudio3418]

@@rogeliosuleta2256 usa nextjs

[@matiasromera330]

porqué a éste símbolo # le dicen gatito?? acá en Argentina le decimos numeral

[@jonmircha]

POr el juego del gato # como se le conoce acá al tres en raya

[@josechirinos2441]

Buenos dias tengo un problemas al cargar F5 en mi pagina de react.js se cierra la sesion de golpe.

[@jonmircha]

🤔

[@AdriaFabrega]

Vaya, yo venía a ver como hacer la estrategia del lado del servidor...

[@lucajavier8497]

Cuando quiero crear un Live Server con algún HTML no me anda, me sale un error 404 de manifest.json

[@lucajavier8497]

Ahí lo arregle. Últimamente veo que Jon para una dirección de un archivo pone "/ejemplo" y yo tengo que poner "./ejemplo", con el punto. El build se me genero sin el punto y entonces no encontraba los archivos

[@juanmanuels8463]

te amo

[@jonmircha]

😅

[@ted50282]

Tu contenido me exita. muy bueno.

[@jonmircha]

😅

[@lalojejeje]

Jon Jon Jon!!!...

[@ErickAQA]

I liked

[@jonmircha]

👋🏻😉

[@lucajavier8497]

Ahora me doy cuenta porque usamos las rutas con el # en la SPA de JS

[@jonmircha]

😉👋🏻

[@heimancastro1954]

🤠

[@jonmircha]

😉👋🏻

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@hernanarica6389]

Entendí la explicación del problema pero no la solución, que pasa si hago una pagina simple con react y react router, mi cliente va a tener ese super fedecto en su web?

[@jonmircha]

Sí, si no usas el hash tendrás errores 404 en todas tus rutas excepto la principal

[@hernanarica6389]

@@jonmircha el tema es que react router recomienda no usar hasRouter ajaja

[@sleeksleek9759]

👍

[@jonmircha]

😎👌🏻

[@manoloexplaintome6348]

En España al # le llamamos almohadilla 😀

[@jonmircha]

🤓👍🏻

[@davidoreiro9475]

😉👍🏻😉👍🏻😉👍🏻

[@jonmircha]

👋🏻😉

[@iamjeffv461]

Hice un curso de React y me parece increíble que no te expliquen esto que es tan importante... Que decepción.

[@isaiasezequielmelgarejo9185]

hace falta una mano mas grande para el like... viste cuando quedas wtf... asi me siento..

[@jonmircha]

😅

[@sucesssoulman]

Hola, aunque normalmente uno comenta para agradecer, quiero hacerlo para apuntar en algo: sería ideal que fueras al grano, en este video veo que tomas 23 minutos para decir algo a lo que le das muchas vueltas una y otra vez. De hecho te invito a ver el video no como el creador sino como si estuvieras aprendiendo algo. A veces menos es más y aunque tu intención no es mala, creo que hay una falla en tu forma de explicar. Si haces preguntas dentro del video no deberías tardar tanto en responderlas, haces las mismas preguntas y dices: por qué pasa esto? varias veces y ya al final contestas, pero eso quita tiempo y créeme hace que suscriptores no vean tus videos. No porque no quieran pasar 23 minutos, solo que si en 23 minutos tardas en decir algo que puede ser dicho en menos tiempo, causa desinterés. Ojalá leas mi comentario y puedas mejorar ya que sé que te gusta enseñar y se te nota. Gracias por el video.

[@jonmircha]

👋🏻😉

[@TheWaalteers]

"En los caminos ocultos del navegador, Jon revela los secretos de React Router Dom para guiarte sin temor..."

[@jonmircha]

👋🏻😉

[@alvarohernanuseche4051]

😶😶

[@jonmircha]

👋🏻😉

[@DonatoMaldonado]

23 minutos viendo para que al final diga que la solución está en el siguiente video ☹