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?
Add a comment
|
7 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.
5 Comments
Gambit2007
Thanks! any reason why it doesn't just "go" to that link?
Jordan Daniels
React components will only re-render if the state or props are updated. If you try to navigate to the page you are currently on, and there isn't a change in state or props in that component, the component will not re-render/refresh. If you update the state/props of the component, or force the page to refresh, it will refresh. And unfortunately,
react-router-dom will not refresh the page for you if you are navigating to the current page.Jordan Daniels
Hope that helps!
JustAnotherDeveloper
Do you mean
window.location.reload()?
Tim Cooper
This solution will force a full page refresh, so you'll use all your useState() and useRef() state, and the entire page will need to be re-rendered including headers and footers. Is there a better solution?
If you use this, it will go to the link and also reload
<a onClick={() => {window.location.href="/something"}}>Something</a>
Comments
It doesn't refresh when you go to the same page.
You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
<Link reloadDocument to="/dashboard" style={{ color: '#A4A4A4' }}>Dashboard</Link>
2 Comments
Nicholas Jela
this should be the anwser! works like a charm! simple, easy!
Mo Baqeri
I agree that this should be the accepted answer, well done and it works as expected.
Conceptually, if your browser bar is already on "/dashboard" and you try to navigate to that, then you shouldn't expect any update. If you do know that things have changed underneath then you need to tell React what parts of the page have changed. You do this by:
- Changing the component parameters
- Using the set-state methods with useState hooks
- If you're fetching data via useEffect() then give a non-empty list of dependencies to "useEffect()" (its 2nd parameter)
- Add an "onClick" handler which does a data fetch, and then put the data (or its timestamp or hash) in a useState().
The other answers suggest you do a full page refresh but this is not good style...it's using a sledgehammer to solve your problem and comes with its own problems, such as you losing state and doing more re-rendering than needed.
Comments
I will use react-router-dom version 6 for this example:
- Before starting make sure you have the correct version#
$ yarn add react-router-dom@6 or $ npm install react-router-dom@6
- follow this piece of code for details:
What is important to note is that I have my link tag inside the router tag. I believe this is is important to have in order to navigates to the respective route path. You can do this by having a navigation component like so (for more context I added my folder structure) :
Comments
Following Ferdousis' answer, if you want to use the Link component this has worked for me:
<Link
to="/companies"
onClick={() => {
window.location.href = "/companies";
}}
>
Start over
</Link>
Comments
When we click to another or , if we use window.location.reload(), it will never navigate to another url.
My solution is update react-router-dom from 5 to 6.
Routes will replace Switch
