Soy nuevo en React, así que estoy seguro de que no entiendo los casos de uso de useLocation, como para qué es bueno y para qué no está destinado.
Me gustaría tener un método para que un componente específico pueda estar al tanto de cualquier cambio de ubicación, incluidos los de pushState. Nota: estoy convirtiendo una base de código Anuglar JS 1.0 que solo usó toda la información de consulta en el hash. Me gustaría usar la función del navegador pushState en esta reescritura.
Ejemplo de código a continuación (solo lo tengo como componente único en un nuevo componente de la aplicación React:
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const RandLocation: React.FC = () => {
const location = useLocation();
useEffect(() => {
console.log('location: ', location);
}, [location]);
return (
<div>
<button
onClick={() => {const r = Math.random(); window.history.pushState({'rnd': r }, '', '/?rnd=' + r)}}>
Click Me</button>
<br/>
</div>
)
}
export default RandLocation;
Solo veo que useEffect se ejecuta al cargar, y si avanzo o retrocedo usando los botones del navegador. Pero no cuando hago clic en el botón "Click Me". ¿Qué me estoy perdiendo? Me gustaría mantener este "conocimiento de la ubicación" lo más simple posible dentro del código de interfaz de React. ¿Hay alguna técnica que funcione en las aplicaciones independientemente de si tiene definidas las rutas de React Router?
Estoy usando React versión 17.0.2 y react-router-dom versión 6.2.2
Creo que debido a que la llamada window.history.pushState está fuera de la administración de estado de React, el enrutador de reacción no lo sabrá. Solía haber una forma de escuchar estos eventos, pero no estoy seguro de que exista algo equivalente en React Router 6.
Podrías usar el gancho useNavigate . Tal vez algo como:
import React, { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
const RandLocation = () => {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
console.log("location: ", location);
}, [location]);
return (
<div>
<button
onClick={() => {
const r = Math.random();
//window.history.pushState({ rnd: r }, "", "/?rnd=" + r);
navigate("/?rnd=" + r, { state: { rnd: r } });
}}
>
Click Me
</button>
<br />
</div>
);
};
export default RandLocation;
Un problema con este enfoque es que tendría que configurar una ruta predeterminada para capturar cualquier cosa para la que no se haya definido una ruta como esta:
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="*" element={<WhereYouWantDefaultRoutesToGoTo />} />
</Routes>
</BrowserRouter>
También puede echar un vuezo a: https://stackoverflow.com/a/70095819/122201