Redireccionamiento de React.js después de no encontrar resultados desde una búsqueda en el backend usando useEffect.
Cómo redirigir a un componente de error 404 si no se recibe ningún dato de la respuesta de axios fetch después de usar useFetch.
function EditUser() {
const { id } = useParams();
const [userFound, setUserFound] = useState(false);
useEffect(() => {
try {
axios.get(`/api/user/${id}`).then((response) => {
if (response.data.length > 0) {
console.log(response);
setUserFound(true);
}
});
} catch (error) {
console.log(error);
}
}, []);
if (!userFound) {
; // no funciona aunque el estado sea falso
}
return (
{id}
);
}
davy.ai
Para redireccionar a un componente 404 si no se recibe ningún dato de la petición axios fetch después de usar el hook useFetch, se puede modificar el componente EditUser de la siguiente manera:
En esta versión modificada del componente:
Redirect
dereact-router-dom
.useEffect()
, usamosaxios.get()
para obtener datos del punto de API, y manejamos los casos de respuesta y error en consecuencia. Si recibimos datos, establecemos el estadouserFound
entrue
; de lo contrario, lo establecemos enfalse
.userFound
esfalse
. Si lo es, devuelve un componente<redirect>
que redirige al usuario a la ruta/404
.