No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Reto: TODO Machine con React Router DOM 5

27/30
Recursos

Aportes 13

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Los cambios que hice para que funcionar谩 con React router dom versi贸n 5 fueron:

En el archivo App.js

En el archivo TodoForm/index.js

En el archivo HomePage.js

Hace poco me paso que estaba actualizando esta libreria a la v6 en un proyecto grande. Estaba haciendo todos los cambios hasta que me tope que en la ultima version habian eliminado un feature que estabamos usando para bloquear la navegacion.
Hablo de usePrompt y useBlocker.
Esto se usa si por ejemplo el usuario esta completando un formulario y antes de guardar los cambios quiere navegar a otra ruta. Nosotros le mostramos un modal de confirmacion antes de hacer la navegacion si tiene cambios. Entonces usamos ese feature. Pero en la version 6 no se puede (o no descubri como) hacerlo.

https://github.com/remix-run/react-router/issues/8139

Aqu铆 les dejo la documentaci贸n de react-router v5 馃槑馃憞

https://v5.reactrouter.com/web/guides/quick-start 馃挌

muy v谩lido para entender por qu茅 no van a actualizar el curso pr谩ctico de React

Hecho! Este me parece uno de los mejores retos del curso, sin 茅l nunca me hubiera probado una versi贸n anterior de nada.
.
La mayor铆a de cambios son superficiales, cambian las rutas y algunos hooks por otros. Me voy a explayar en el reto de los query params, que s铆 es m谩s complicado.
.
Anteriormente, se pod铆a usar el hook useSearchParams. Lamentablemente este no est谩 en la V5. Lo que hice despu茅s de muuuucha investigaci贸n fue hacer un hook propio (fuertemente inspirado en respuestas de StackOverflow)
.

useQuery.js

import { useMemo } from 'react'
import { useLocation } from 'react-router-dom'

export function useQuery(value) {
    const { search } = useLocation()
    const setQuery = useMemo(() => new URLSearchParams(search), [search])
    const query = setQuery.get(value)
    return [query, setQuery]
}

Luego lo implement茅 de la siguiente manera:

TodoSearch.js

import React from 'react'
import { useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { useQuery } from '../hooks/useQuery'

export function TodoSearch({ setSearchValue, searchValue, loading }) {
    const [searchQuery] = useQuery('search')
    const history = useHistory()

    const onSearchValueChange = ({ target: { value } }) => {
        setSearchValue(value)
        history.push({ search: `search=${value}` })
    }

    useEffect(() => {
        if (searchQuery && searchQuery !== searchValue)
            setSearchValue(searchQuery)
    }, [searchQuery, setSearchValue, searchValue])

    return (
        <input
            className={`TodoSearch ${loading && 'TodoSearch--loading'}`}
            onChange={onSearchValueChange}
            value={searchQuery ?? ''}
            placeholder="Search a To-Do"
        />
    )
}

Se siente tan f谩cil una vez terminado鈥 no fue directo, pero fue muy entretenido y un gran desaf铆o.

Documentaci贸n de React Router DOM V5

Documentaci贸n aqu铆

React Router V5 vs V6 dev.to
Documentaci贸n de React Router reactrouter.com

No fue tan sencillo como parece鈥 Batalle mucho con el reto de TodoSearch.
Dejo el codigo por si a alguien le sirve de apoyo.

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const history = useHistory();

  const onSearchValueChange = (event) => {
    const value = event.target.value;
    setSearchValue(value);
    history.push({ search: value });  
//modificar la url y guarda todo en location
  };

const param = history.location.search.slice(1);
// usar el metodo slice para quitar  '?' al inicio del string

 const searchParam = decodeURI(param) ?? searchValue;
// decodeURI  es una funcion de javascript ayuda a decodificar la url.
  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchParam}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

Lo 煤nico raro, fue switch en vez de routes y route.

Aqu铆 les comparto mi repositorio en github en donde la rama main est谩 con react router dom v6, mientras que la rama proyecto-react-router-dom-5, la aplicaci贸n est谩 con react router dom v5.

Repositorio:
curso-react-router-proyecto2

Recuerdo la primera vez que me puse aprender React, en ese tiempo a煤n ten铆an una batalla campal por ver que router usar (Solo que yo no lo sab铆a), el router estaba, solo estaba; cuando buscabas informaci贸n sobre el tema terminabas m谩s cerca de la batalla campal que de la soluci贸n; ahora es la guerra por los routers est谩 digamos que en relativa paz; este reto no es dificil, solo que volver a esos tiempos es \* Recuerdos de Vietnam \* recordar el como intentaba usar cosas de las que no sab铆a lo suficiente, que ahora veo y es m谩s facil, este reto me record贸 un mont贸n esos d铆as... As铆 que gracias por el ataque de nostalgia, realmente he aprendido mucho desde esos d铆as

tuve unos errores orribles, los cuales no pude salir, aqu铆 les muestro cuales eran

Tenia todos los imports que se necesitaban pero me seguian pasando los errores, como por ejemplo el primero que me dice que en ese archivo index de el folder TodoForm no encuentra el useHistory donde si lo estoy importando

Oigaan.
Lo logre. Utilizando
Switch, useHistory y useLocation de la V5

Pero el input de search porque cuando quiero escribir me queda invalido hasta que hago click?

por cada letra que quiero colocar es un click que debo hacer al input