Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Link doesn't refresh the page

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?

like image 561
Gambit2007 Avatar asked Nov 21 '18 21:11

Gambit2007


People also ask

Does link reload the page React?

React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI.

How do I trigger a refresh page in React?

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.

How do you change the URL without reloading the page in React?

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.

How do I fix error 404 in React?

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.


1 Answers

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.

like image 164
Jordan Daniels Avatar answered Oct 13 '22 23:10

Jordan Daniels