How To Refresh A Page Using React-route Link
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
Solution 1:
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.
Solution 2:
Try like this.
You must give a function as value to onClick()
You button:
<buttontype="button"onClick={refreshPage }><span>Reload</span></button>
refreshPage function:
functionrefreshPage(){
window.location.reload();
}
Solution 3:
You can use this
<a onClick={() => {window.location.href="/something"}}>Something</a>
Solution 4:
I ended up keeping Link and adding the reload to the Link's onClick event with a timeout like this:
functionrefreshPage() {
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
Solution 5:
Here's one way of doing it using React Bootstrap and a component that you can then drop into any page...
importButtonfrom'react-bootstrap/Button';
exportconstRefreshCurrentPage = () => {
functionrefreshPage(){
window.location.reload();
}
return (
<divclassName="row"><ButtononClick={refreshPage } variant="secondary"size="sm"className="btn ml-4">Refresh Page</Button></div>
);
}
Post a Comment for "How To Refresh A Page Using React-route Link"