My goal is to implement the navigation.push(url) functionality upon clicking an anchor tag element in order to prevent the app from refreshing when navigating to a new page, thus allowing me to maintain the application state.
The decision to use this on an anchor tag instead of a button is based on:
- Preserving the ability to right-click the element and copy the URL
- Ensuring that the URL remains visible when hovering over the element
Despite attempting to combine these functionalities as shown in the following code snippet, the webapp still refreshes and navigates to a new page:
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;