I have just arrived at a finding around the <Link> component which I found quite surprising.
I noticed that click on the <Link> component to navigate to a different part of the React app cause the browser to refresh the website.
After some troubleshooting, I found that this can be reproduced whenever a function is passed in the state. The function doesn't have to be used in the target site - as long as it's passed, it will cause a refresh.
Example: - This component forces refresh on link click
export default function MyLink() {
return(
<Link
to='/myPath'
state={{
randomFunc: () => {}
}}>
Click me
</Link>
)
}
Removing randomFunc from state, or changing it to an object results in the website no longer being refreshed on click of the <Link> component.
Am I doing something wrong, or is this a React bug I've just discovered?