Prevent Link from using cached state prop during page refresh?

[JordanHoffman]

I'm using Gatsby's Link component and passing some info in the state prop to have animations play in my nav bar when links are pressed. (ex: you press a link and its bg-color changes to highlighted while the prior link's bg-color changes back to normal)

I run into a problem during a page refresh after doing some prior link clicks. In this situation, it seems that the refresh uses a cached state value from the last Link click. I don't want this because it's showing animations as if navigation occured from one nav Link to another when it didn't. I want a page refresh to be treated as if there were no prior Link clicks and the page was loaded up for the first time with no Link state data. But I don't know how to prevent this use of cached state from occurring. Any advice?

Edit: Upon further study, this seems to only happen when reloading from my index page. On other pages the location's state is null upon refresh as it should be. But on the index page it always uses the location state from the previous navigation to it.

[herecydev]

This is actually a browser thing. State is stored via the history api. If you don't want to store state this way, I would recommend using state in react. You could use wrapRootElement so it spans across multiple pages and you can track the state there. When refreshing the browser will reload the react app, therefore state will be lost.