Sé que podemos reemplazar los parámetros de consulta en clases basadas en componentes haciendo algo como:
componentDidMount() { const { location, replace } = this.props; const queryParams = new URLSearchParams(location.search); if (queryParams.has('error')) { this.setError( 'There was a problem.' ); queryParams.delete('error'); replace({ search: queryParams.toString(), }); } }¿Hay alguna forma de hacerlo con ganchos de reacción en un componente funcional?
Sí, puede usar los ganchos useHistory y useLocation de react-router:
import React, { useState, useEffect } from 'react' import { useHistory, useLocation } from 'react-router-dom' export default function Foo() { const [error, setError] = useState('') const location = useLocation() const history = useHistory() useEffect(() => { const queryParams = new URLSearchParams(location.search) if (queryParams.has('error')) { setError('There was a problem.') queryParams.delete('error') history.replace({ search: queryParams.toString(), }) } }, []) return ( <>Component</> ) } Como useHistory() devuelve un objeto de historial que tiene una función de replace que se puede usar para reemplazar la entrada actual en la pila de historial.
Y useLocation() devuelve el objeto de ubicación que tiene una propiedad de search que contiene la cadena de consulta de la URL, por ejemplo ?error=occurred&foo=bar" que se puede convertir en un objeto mediante la API URLSearchParams (que no es compatible con IE).