Tengo algunas migas de pan en la página. Cuando reemplazoEstado, veo que la URL cambia, no hay problema con eso, pero no pude detectar ese cambio de URL en el componente de reacción que probé, pero no tiene sentido que funcione solo una vez cuando el componente está montado.
const usePath = () => { const [path, pathSet] = useState(window.location.pathname); const listenToPopstate = () => { const winPath = window.location.pathname; pathSet(winPath); }; useEffect(() => { window.addEventListener("locationchange", listenToPopstate); return () => { window.removeEventListener("locationchange", listenToPopstate); }; }, []); return path; }; const Breadcrumb = () => { const [state, stateSet] = useState(false); const path = usePath(); useEffect(() => { path.indexOf('StoreSelection') > -1 && stateSet(true) }, [path]); return ( <ol className="breadcrumb" style={breadcrumb}> <li key="1" className="breadcrumb-item align-items-center"> {state ? 'AAA' : 'BBB'} </li> </ol> ); }Creo que encontrará que instanciar un objeto de history y usarlo para escuchar será más fácil para usted.
import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); const usePath = () => { const [path, pathSet] = useState(history.location.pathname); const listener = (location, action) => { pathSet(location.pathname); }; useEffect(() => { const unlisten = history.listen(listener); return unlisten; }, []); return path; };