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 8

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

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

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

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.

Documentaci贸n de React Router DOM V5

Documentaci贸n aqu铆

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.

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