Quiero usar la funcionalidad de navigation.push(url) al hacer clic en un elemento de etiqueta de anclaje para que la aplicación no se actualice al navegar a otra página, y puedo mantener el estado de la aplicación.
La razón por la que quiero usar esto en un elemento de etiqueta de ancla en lugar de un botón es:
Al intentar usar la combinación como se ve en el código a continuación, aún navega hacia una nueva página que hace que la aplicación web se actualice:
import React from 'react'; import { useHistory } from 'react-router-dom'; const TestComp = () => { const navigation = useHistory(); return ( <a onClick={() => { navigation.push(`/test`); }} href={`/test`}> this is a link </a> ); }; export default TestComp;Use el componente Link de react-router-dom . Representa una etiqueta de anclaje en el DOM y hace todos los enlaces/navegación por usted que está tratando de hacer manualmente, y no vuelve a cargar la página.
import React from 'react'; import { Link } from 'react-router-dom'; const TestComp = () => { return ( <Link to="/test"> this is a link </Link> ); }; export default TestComp;Al usar event.preventDefault() evita que el navegador ejecute la función normal de un evento (clic)... En la etiqueta de anclaje, evita que el navegador navegue a otra página, para que pueda hacerlo manualmente
<a onClick={(e) => { e.preventDefault() navigation.push(`/test`); }} href={`/test`}> this is a link </a>