Actualmente estoy tratando de obtener una función onclick para disparar solo cuando se hace clic. Pero me doy cuenta de que después de hacer clic y luego de cargar la página, la función se activa nuevamente.
Una vez que hago clic en 'Anterior', la página va a '/test1' por un segundo, luego carga instantáneamente '/test'. ¿No estoy usando este eventListener correctamente?
Nota: '/test1' y '/test2' están en un proyecto de reacción y '/test' está en otro. No puedo usar history.push para este escenario.
Encabezado.js
<div id="header-link"> <strong id="header-copy"></strong> </div>Entrada.js
function getLink(currentPage, history) { if(currentPage.name === 'test1') { document.getElementById("header-link").addEventListener("click", function(e){ e.preventDefault(); window.location.pathname = '/test' }); document.getElementById("header-copy").innerHTML = 'Back'; } if (currentPage.name === 'test2') { document.getElementById("header-link").addEventListener("click", function(){ history.push('/test1') }); document.getElementById("header-copy").innerHTML = 'Previous'; } }No necesita usar addEventListener cuando onClick es suficiente.
import { useHistory } from "react-router-dom"; const Header = () => { let history = useHistory(); return ( <div onClick={() => { if (window.location.href.endsWith("/test")) { history.push("/"); } else { window.location.pathname = "/test"; //history.push("/test"); } }} > Click me </div> ); };Pero si insiste en usar addEventListener, debe eliminarlos .