3

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.

Andy Pandy
  • 51
  • 1
  • 5
  • Without a page refresh? At what level (e.g., component depth) are you trying to do this? Without a state or property change there's no explicit reason to re-render unless you force it to re-render. – Dave Newton Jan 06 '21 at 18:22

1 Answers1

3

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Is this a valid alternative? { import { globalHistory as history } from '@reach/router' const Layout = () => { const forceReload = history.location.state.sameLink ? { key: new Date() } : {} return } – Andy Pandy Jan 06 '21 at 20:24
  • Could be, without a sandbox it's impossible to know how this will behave across all browsers or in different use-cases. – Ferran Buireu Jan 06 '21 at 20:26
  • No worries :). Give it a try in a sandbox and we will try to debug a little bit more. But as I said, it's difficult to know if will work in different use-cases or scenarios. – Ferran Buireu Jan 07 '21 at 06:10