Storing a Function in <Link> Causes Refresh on Click

Viewed 30

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?

0 Answers
Related