Curso React: 58. React Router: Parámetros de consulta (hooks useLocation y useHistory) - jonmircha

[@enzofrias1367]

Exelente jon!! muchas gracias!! si vienen buscando ayuda, se remplazo useHistory segun lei, este es el codigo que funcionaria en el ejemplo que dio jon: no es necesario hacer push, ya que es un metodo que recibe parametros. let navigate= useNavigate(); console.log( navigate) const handlePRev=()=>{ navigate(`?inicio=${start - LIMIT}&fin=${end - LIMIT}`) } const handleNext=()=>{ navigate(`?inicio=${start + LIMIT}&fin=${end + LIMIT}`) }

[@jonmircha]

🤓👍🏻

[@azaliaruizc.9316]

Muchas graciiias 🤩

[@d-landjs]

Con React Router v6 cambio su sintaxis asi: // Maneja historial de la pag web let navigate = useNavigate(); const handlePrev = e => { navigate({search: `?inicio=${start - limit}&fin=${end - limit}`}) if(start > 0){ } } const handleNext = e => { navigate({search: `?inicio=${start + limit}&fin=${end + limit}`}) } Excelente maestro, seria genial mas adelante ver un ejemplo con los query params :D, una pregunta, no entendi sobre serializar cuando usa URLSearchsParams(search) :c

[@jonmircha]

👍🏻

[@rafaelfloresb8833]

Buenas tardes, para agregar a su valioso comentario. let LIMIT = 20; let {search} = useLocation(); let query = new URLSearchParams(search); let start = parseInt(query.get("inicio")); let end = parseInt(query.get("fin")); let navigate = useNavigate(); const handlePrev = (e)=>{ if((start-LIMIT) > 0){ navigate({search: `?inicio=${start - LIMIT}&fin=${end - LIMIT}`}) } }; const handleNext = (e)=>{ navigate({search: `?inicio=${start + LIMIT}&fin=${end + LIMIT}`}) };

[@david.t.v9211]

@@rafaelfloresb8833 GRACIAS, ERES LO MÁXIMO

[@r4nd0m-k2z]

Dejo comentario!, no solo por las excelentes clases de super mega calidad, sino para ayudarte con youtube!. Abrazo grande profe!. Desde Argentina.

[@jonmircha]

Mil gracias!

[@eliam9461]

estuve buscando esto por muchísimo tiempo jajaja wtf qué crack. COMPARTIDO 👍

[@jonmircha]

🧔🏻🙌🏻

[@camilogomez5243]

Gracias Jon, vengo del futuro y el 1 de Enero 2022 , seremos 100.000 suscriptores..... muchachos a compartir este curso a todos !!!

[@jonmircha]

🤞🏻🔥

[@leandromarquez9257]

Maestro, tirame el numero de la loteria

[@DanielStanlyInterianoRapalo]

Muy contendo con el contenido de tu curso, muy valioso y el aporte en los comentarios se agradece ya que en más de alguna ocación me han sacado de apuros. Sugiero siempre revisar la documentación sobre todo para los que estamos iniciando con este lenguaje de desarrollo.

[@jonmircha]

😉👋🏻

[@p.fernandorubiobailon4582]

Grande Jon, eres todo un orgullo Mexicano! 🇲🇽

[@jonmircha]

😉👍🏻

[@AllanTorresBass]

Gracias!!! Nuevamente, por aqui vamos!!!!

[@jonmircha]

Un saludo

[@edwinroman30]

Saludos. En la versión v6 aproximada a la ^6.4.2, pueden utilizar un hook llamado `useSearchParams` que permite trabajar con parametros o queries, este hook recibe un objeto URLSearchParam. Para mas info en la documentación hay mas detalles. Gracias Jonh!

[@jonmircha]

😉👋🏻

[@francovedia5584]

cada video aprendo algo nuevo, gracias.

[@jonmircha]

😉👋🏻

[@facled3083]

Gracias por toda la info que das!! Es un material excelente. Saludos!

[@jonmircha]

😉👋🏻

[@cesarpena9229]

Tu contenido es muy bueno, tiene mucha calidad y ayuda verdaderamente en el trabajo, felicidades eres muy bueno programando.

[@jonmircha]

😉👍🏻

[@r.w.s.2402]

Buenísimo el uso de la paginación y el paso de parámetros por consulta en React:)

[@jonmircha]

😉

[@conelecphp7751]

Excelente por la explicación del los parámetros de consultas en los router. gracias profe Jon

[@jonmircha]

😉✌🏻

[@juliantomasvergaracifuente9627]

simplemente un CRACK!

[@jonmircha]

😎👌🏻

[@Wiiiiizard]

🧙‍♂Muchas gracias!!!

[@addevmoises]

Excelente video, los parámetros de consulta son muy útiles cuando consumimos una api

[@jonmircha]

Gracias por comentar👋🏻😉

[@fernandoaguero2995]

La mejor clase de lejos.

[@jonmircha]

🤗

[@christCE]

Saludos Jon. En las actuales versiones de React-dom esta deprecado el hook useHistory, se puede reemplazar por el hook useNavigate (Jon muestra el ejemplo de como usarlo en el video #57 Curso React Router 6), por aca dejo la solucion solo cambiando de hook:
 import { useLocation, useNavigate } from "react-router-dom"; const Productos = () => { let { search } = useLocation(); let query = new URLSearchParams(search); // console.log(query); const LIMIT = 20; let start = parseInt(query.get("inicio")) || 1; let end = parseInt(query.get("fin")) || LIMIT; let history = useNavigate(); const handlePrev = (e) => { history(`?inicio=${start - LIMIT}&fin=${end - LIMIT}`); }; const handleNext = (e) => { history(`?inicio=${start + LIMIT}&fin=${end + LIMIT}`); }; return ( Productos Mostrando productos del {start} al {end} {start > LIMIT && Atras} Adelante ); }; export default Productos;

[@jonmircha]

👋🏻😉

[@andresteixeira1496]

¡Excelente Jon! Muy productiva la clase. Saludos.

[@jonmircha]

Gracias, saludos!

[@aviellisandrovasquezreyes1172]

increible curso :D

[@jonmircha]

👋🏻😉

[@jeanrodriguez6645]

Excelente explicación, la entendí de maravilla, muchas gracias profesor

[@jonmircha]

Excelente

[@nihil_um]

Una maravilla, como siempre.

[@jonmircha]

✌🏻

[@msngabi95]

¡Gracias!!

[@jonmircha]

De nada!

[@pablopizarro2487]

Hola Jon como estas me encanta como explicas todo detallado mira que hice cursos y vos fuiste el que me saco de todas las dudas te felicito!! lo único que en este momento estoy revisando React router y me aparecen dos errores o actualizaciones a partir del react router dom 6: 1) Switch no se usa mas se usa Routes 2) useHistory no viene mas ahora se usa useNavigator a medida que voy avanzando voy viendo eso si se de algo mas te escribo y si podes dar una actualización te lo voy agradecer un montón 🥲

[@pablopizarro2487]

tambien en Link Component y Children no se usa creo que ahora es Element

[@jonmircha]

👋🏻😉

[@vanhellsing3029]

buenisimo

[@jonmircha]

👋🏻

[@estebanoctaviopavezllanca2385]

Muchas gracias

[@jonmircha]

De nada

[@alexanderalvarado1026]

gracias por compartir tu conocimiento (Y)

[@jonmircha]

Con mucho gusto

[@emersonpalaciootalvaro2632]

excelente gracias

[@jonmircha]

🧔🏻✌🏻

[@maduenox]

Me recordó al meme de la calculadora: 2 + 2 = 22 jaja. Muy útil el ejemplo de los query params 👍

[@jonmircha]

😉👍🏻

[@instintoimagen]

Excelente explicación! este es un muy buen #curso de #reactjs

[@jonmircha]

Hola, muchas gracias

[@eknath3813]

que crack

[@jonmircha]

👋🏻😉

[@israelgonzalez677]

¡Genial!

[@jonmircha]

✌🏻

[@alvarohernanuseche4051]

😎😎

[@jonmircha]

👋🏻😉

[@heimancastro1954]

💯

[@jonmircha]

😉👍🏻

[@tenjo6669]

Recomiendas React Native para aplicaciones Jon?

[@jonmircha]

No he trabajado con React NAtive, así que no puedo darte una opinión objetiva

[@francoagustin765]

Jon, tus videos son buenisimos. pero veo que siempre usas css normal, es decir no usas styled-components. es por gusto propio o para agilizar los videos? es una duda que tengo, ya que a mi no me convence mucho styled-components, me siento mas comodo con el css de siempre, pero la duda va si en empresas se usa

[@jonmircha]

Por gusto, por convicción y por minimalismo 🫢

[@punchanaaqui4228]

Saludos

[@jonmircha]

✌🏻

[@lalojejeje]

Jon Jon Jon!!!...

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@fredy894]

Hola Jon, una consulta. En mi web necesito que una vez que el usuario ya logueo y paso al home, No pueda volver con la la flecha del navegador a la ruta /login de nuevo. Hay forma de eliminar del history una ruta?

[@jonmircha]

Cuando se loguee, borra el historial

[@fredy894]

@@jonmircha eso seria genial! No encontré con el useHistory como hacerlo

[@helipalacio8772]

🧔‍♀🧔‍♀🧔‍♀

[@Elias-zn6og]

¿ no se puede usar history.location del useHistory ,en vez de useLocation??

[@jonmircha]

Lo ideal es de useHistory pero inténtalo y nos cuentas

[@kevyyar]

seria bueno esto de react router pero la v6.

[@jonmircha]

Aprende la 5 y tu mismo podrás actuaizrte a la 6 leyendo la doc 😉

[@kevyyar]

@@jonmircha toda la razon master!

[@angelelfmusic]

por que cuando refresco la pagina se borra los queryparams?

[@TheWaalteers]

"En el fascinante mundo de la codificación, Jon brilla con su sabiduría y dedicación. JS es su lienzo, su medio de expresión, En donde componentes de React crean magia e ilusión..."

[@jonmircha]

👋🏻😉