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
Fundamentos de navegación en la web
¿Cuándo necesitas React Router?
SSR vs. Single Page Applications
Versiones de React Router: ¿Por qué son tantas? ¿Cuál elegir?
Introducción a React Router DOM 6
Instalación de React Router DOM 6
BrowserRouter vs. HashRouter
Route: componentes de navegación
Link vs. NavLink
useParams: rutas dinámicas
useNavigate: historial de navegación
Outlet: nested routes
Fake authentication con React Router DOM 6
useAuth: login y logout
Menú con rutas públicas y privadas
Navigate y redirects: protegiendo rutas privadas
Roles y permisos
Reto: composición de componentes con navegación
Reto: UX de login y logout
Reto: roles complejos
React Router en TODO Machine
Integrando React Router a proyectos en React
Creando las rutas de TODO Machine
Botón de editar TODOs
Generador automático de IDs
Cambiando modales por navegación
Obtener y editar TODOs
useLocation: transferencia de datos por navegación
Deploy con React Router en GitHub Pages
Próximos pasos
Reto: página de búsquedas con navegación
Reto: TODO Machine con React Router DOM 5
Reto: PlatziMovies con React Router
Reto: crea tu propio React Router
Espera más cursos de React.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 0
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.
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.
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)
.
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:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.