I have this code:
<Link to="/dashboard" style={{ color: '#A4A4A4' }}>Dashboard</Link>
As part of my app, but if i'm currently viewing the /dashboard
route, the page doesn't refresh.
Why? And how can i make it refresh?
React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI.
To refresh a page, we need to use the window. location. reload() method in React. By default this method reloads the page from a cache, if we pass true as an argument it reloads the entire page from a server instead of cache.
Method 2: Adding a new state with pushState() Method: The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.
Use a wildcard placeholder to handle 404 page not found in React router, e.g. <Route path="*" element={<PageNotFound />} /> . A route that has an asterisk path * serves as a catch all route. It only matches when no other routes do.
You can try forcing a refresh, either with:
<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>
or
<Link to="/dashboard" onClick={() => window.location.reload()} style={{ color: '#A4A4A4' }}>Dashboard</Link>
You can also add logic to the onClick method to check which page you are currently on, and to only refresh if you are on the dashboard.
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