reactjs - How do I refresh current page in Gatsby?

Question

I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page. I've tried

navigate('/temp')
navigate(link, { replace: true })

but it's not working.

question from:https://stackoverflow.com/questions/65601134/how-do-i-refresh-current-page-in-gatsby

Answer 1

The short answer is that you can't refresh the same page using @reach/router (from React, and Gatsby extends from it). This is because the location is the same so for the internal routing, nothing changes hence the refresh is not forced.

The easiest way to achieve it is by using the old-fashioned window.location.reload(). This will refresh the full page, forcing the components to be rendered again.

You can follow this GitHub thread for further information. As you can see, it can be achieved by diving into history.pushState and in other tricky ways but it always ends in a headache, it's not recommended since it's not the purpose of the @reach/router if it thrives will be with multiple caveats.

For standard internal navigation between pages, use <Link> component rather than navigate.