React Link doesn't refresh the page

up vote
1
down vote

favorite

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?

asked Nov 21 at 21:26

Gambit2007

373523

add a comment |

up vote
1
down vote

favorite

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?

asked Nov 21 at 21:26

Gambit2007

373523

add a comment |

up vote
1
down vote

favorite

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?

asked Nov 21 at 21:26

Gambit2007

373523

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?

reactjs react-router-dom

asked Nov 21 at 21:26

Gambit2007

373523

asked Nov 21 at 21:26

Gambit2007

373523

asked Nov 21 at 21:26

Gambit2007

373523

asked Nov 21 at 21:26

Gambit2007

373523

asked Nov 21 at 21:26

Gambit2007

373523

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

You can try forcing a refresh, either with:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

<Link to="/dashboard" onClick={() => window.location.refresh()} 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.

answered Nov 21 at 22:01

Jordan Daniels

27439

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420677%2freact-link-doesnt-refresh-the-page%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

You can try forcing a refresh, either with:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

<Link to="/dashboard" onClick={() => window.location.refresh()} 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.

answered Nov 21 at 22:01

Jordan Daniels

27439

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

add a comment |

up vote
1
down vote

accepted

You can try forcing a refresh, either with:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

<Link to="/dashboard" onClick={() => window.location.refresh()} 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.

answered Nov 21 at 22:01

Jordan Daniels

27439

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

add a comment |

up vote
1
down vote

accepted

You can try forcing a refresh, either with:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

<Link to="/dashboard" onClick={() => window.location.refresh()} 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.

answered Nov 21 at 22:01

Jordan Daniels

27439

You can try forcing a refresh, either with:

<Link to="/dashboard" onClick={this.forceUpdate} style={{ color: '#A4A4A4'}}>Dashboard</Link>

<Link to="/dashboard" onClick={() => window.location.refresh()} 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.

answered Nov 21 at 22:01

Jordan Daniels

27439

answered Nov 21 at 22:01

Jordan Daniels

27439

answered Nov 21 at 22:01

Jordan Daniels

27439

answered Nov 21 at 22:01

Jordan Daniels

27439

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

add a comment |

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

Thanks! any reason why it doesn't just "go" to that link?
– Gambit2007
Nov 21 at 22:03

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
Nov 21 at 22:20

Hope that helps!
– Jordan Daniels
Nov 21 at 22:32

Yeah id does, thanks!
– Gambit2007
Nov 21 at 22:34

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi