I am trying to refresh a page using react-route Link. But the way I have implemented it goes to the URL one step back.(as an example if the URL was ../client/home/register and when I press the reload is goes to ../client/home)
below is my code
const AppErrorPage = () => (
<div>
<div style={ styles.container }>
<h2>Error</h2>
<p> Something went wrong, please reload the page </p>
<div>
<Link to="" refresh="true">
<span>Reload</span>
</Link>
</div>
</div>
</div>
);
React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI.
To detect page refresh by pressing F5 in a React component, we can use the performance. navigation. type property to check what kind of navigation is done. If the value is 1, then we refreshed the page manually with the F5 key.
React gives us two options in which we can reload a component. Either we can reload a component using the Vanilla JavaScript , or we can use the state to reload the component whenever a change is made in the state of that component.
To refresh page you don't need react-router, simple js:
window.location.reload();
To re-render view in React component, you can just fire update with props/state.
Try like this.
You must give a function as value to onClick()
You button:
<button type="button" onClick={ refreshPage }> <span>Reload</span> </button>
refreshPage function:
function refreshPage(){
window.location.reload();
}
You can use this
<a onClick={() => {window.location.href="/something"}}>Something</a>
I ended up keeping Link and adding the reload to the Link's onClick event with a timeout like this:
function refreshPage() {
setTimeout(()=>{
window.location.reload(false);
}, 500);
console.log('page to reload')
}
<Link to={{pathname:"/"}} onClick={refreshPage}>Home</Link>
without the timeout, the refresh function would run first
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With