Supongamos que tengo el siguiente código:
const [showChild1, setShowChild1] = useState(false) const [showChild2, setShowChild2] = useState(false) <ParentComponent> {showChild1 && <Child1 />} {showChild1 && <Child2 />} .... </ParentComponent Supongamos que estoy viendo Child2 en mi navegador, pero quiero volver a ver Child1 . ¿Cómo puedo usar los botones de avance y retroceso del navegador para navegar entre componentes renderizados condicionalmente? A partir de ahora, cuando hago clic en el botón Atrás, me empujan a la ruta / .
Puede agregar detectores de eventos al objeto de ventana global. El nombre del evento es "popstate", aquí está el código de ejemplo:
useEffect(() => { window.history.pushState(null, null, window.location.pathname); window.addEventListener('popstate', yourEvent); return () => { window.removeEventListener('popstate', yourEvent); }; }, []);use el evento onpopstate para manejar las opciones de navegación del navegador.