I have an image logo on my ReactJS website which has a link to load the current page URL. I can see that the URL is correct (when I hover on the image, the correct URL is displayed at the bottom left corner of the browser), but when I click on the image the page does not reload (it does essentially nothing, not even a re-render).
<Link to={`${window.location.pathname}`}>
<img className="img-fluid" src={Logo} alt="Alt_Text" />
</Link>
Is there any way to reload the page without using an onClick handler in the Link?
If you want to force the window to reload, you can try to use window.location.reload() in any event you wanna trigger.
React-Router-Dom will only redirect your url history only if it detects any change, and it will not reload page at all because React is typically used to build Single-Page-Application (SPA). Therefore, what you are asking is contradicting to the principle of React and React-Router-Dom.
try these:
user Link:
<Link to={`${window.location.pathname}`} onClick={()=>{window.location.reload()}}> <img className="img-fluid" src={Logo} alt="Alt_Text /></Link>
Or use a tag:
<a href={`${window.location.pathname}`}><img className="img-fluid" src={Logo} alt="Alt_Text /></a>