Component Not Re-rendering on clicking of a Link
I am using Link property of react to goto the same url, But with the diffrent param. But my api is not calling again as i put the api call part in the componentDidMount().On Click of a url my url param change. Below is the code.
componentDidMount(){
let profile_id = window.localStorage.getItem('profile_id');
if(profile_id && profile_id!==''){
this.props.fetchSingleProfile(profile_id)
}
}
First time, api call and data rendered successfully. Below is how i am using Link.
<Link to={this.userId}>Next</Link>
Now on click of link,I am successfully routed to the give url, But as i mentioned "Component is rendering again on successfully routing, But api is not calling again". Is there any thing in react, which is aware of it, my url is changed, Now call the api again.
Note: Can i use any lifecycle method like: componentWillReceiveProps, But i don't want to call the api again.
reactjs react-router
add a comment |
I am using Link property of react to goto the same url, But with the diffrent param. But my api is not calling again as i put the api call part in the componentDidMount().On Click of a url my url param change. Below is the code.
componentDidMount(){
let profile_id = window.localStorage.getItem('profile_id');
if(profile_id && profile_id!==''){
this.props.fetchSingleProfile(profile_id)
}
}
First time, api call and data rendered successfully. Below is how i am using Link.
<Link to={this.userId}>Next</Link>
Now on click of link,I am successfully routed to the give url, But as i mentioned "Component is rendering again on successfully routing, But api is not calling again". Is there any thing in react, which is aware of it, my url is changed, Now call the api again.
Note: Can i use any lifecycle method like: componentWillReceiveProps, But i don't want to call the api again.
reactjs react-router
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
i have edited the code.
– user10298495
Nov 23 at 10:52
so it's not only route the same. the only parameter is also equal. why do you even use<Link>here? something like<button onClick={this.loadData}>would reload the data just fine.
– skyboyer
Nov 23 at 12:28
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04
add a comment |
I am using Link property of react to goto the same url, But with the diffrent param. But my api is not calling again as i put the api call part in the componentDidMount().On Click of a url my url param change. Below is the code.
componentDidMount(){
let profile_id = window.localStorage.getItem('profile_id');
if(profile_id && profile_id!==''){
this.props.fetchSingleProfile(profile_id)
}
}
First time, api call and data rendered successfully. Below is how i am using Link.
<Link to={this.userId}>Next</Link>
Now on click of link,I am successfully routed to the give url, But as i mentioned "Component is rendering again on successfully routing, But api is not calling again". Is there any thing in react, which is aware of it, my url is changed, Now call the api again.
Note: Can i use any lifecycle method like: componentWillReceiveProps, But i don't want to call the api again.
reactjs react-router
I am using Link property of react to goto the same url, But with the diffrent param. But my api is not calling again as i put the api call part in the componentDidMount().On Click of a url my url param change. Below is the code.
componentDidMount(){
let profile_id = window.localStorage.getItem('profile_id');
if(profile_id && profile_id!==''){
this.props.fetchSingleProfile(profile_id)
}
}
First time, api call and data rendered successfully. Below is how i am using Link.
<Link to={this.userId}>Next</Link>
Now on click of link,I am successfully routed to the give url, But as i mentioned "Component is rendering again on successfully routing, But api is not calling again". Is there any thing in react, which is aware of it, my url is changed, Now call the api again.
Note: Can i use any lifecycle method like: componentWillReceiveProps, But i don't want to call the api again.
reactjs react-router
reactjs react-router
edited Nov 23 at 11:59
asked Nov 23 at 10:03
user10298495
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
i have edited the code.
– user10298495
Nov 23 at 10:52
so it's not only route the same. the only parameter is also equal. why do you even use<Link>here? something like<button onClick={this.loadData}>would reload the data just fine.
– skyboyer
Nov 23 at 12:28
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04
add a comment |
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
i have edited the code.
– user10298495
Nov 23 at 10:52
so it's not only route the same. the only parameter is also equal. why do you even use<Link>here? something like<button onClick={this.loadData}>would reload the data just fine.
– skyboyer
Nov 23 at 12:28
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
i have edited the code.
– user10298495
Nov 23 at 10:52
i have edited the code.
– user10298495
Nov 23 at 10:52
so it's not only route the same. the only parameter is also equal. why do you even use
<Link> here? something like <button onClick={this.loadData}> would reload the data just fine.– skyboyer
Nov 23 at 12:28
so it's not only route the same. the only parameter is also equal. why do you even use
<Link> here? something like <button onClick={this.loadData}> would reload the data just fine.– skyboyer
Nov 23 at 12:28
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04
add a comment |
1 Answer
1
active
oldest
votes
But my api is not calling again as i put the api call part in the componentDidMount().
You have same route, so the same <Route> is rendered. All nested components stay the same so instead of remounting they are just updated.
You have few possible ways to handle that:
- Fetch data not only on
componentDidMountbut also oncomponentDidUpdate
- Use
keyto remount component
It cannot be done with just react-router's <Link /> since it is not actually its responsibility
answered Nov 23 at 10:13
skyboyer
3,32111128
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444497%2fcomponent-not-re-rendering-on-clicking-of-a-link%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
But my api is not calling again as i put the api call part in the componentDidMount().
You have same route, so the same <Route> is rendered. All nested components stay the same so instead of remounting they are just updated.
You have few possible ways to handle that:
- Fetch data not only on
componentDidMountbut also oncomponentDidUpdate
- Use
keyto remount component
It cannot be done with just react-router's <Link /> since it is not actually its responsibility
answered Nov 23 at 10:13
skyboyer
3,32111128
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
add a comment |
But my api is not calling again as i put the api call part in the componentDidMount().
You have same route, so the same <Route> is rendered. All nested components stay the same so instead of remounting they are just updated.
You have few possible ways to handle that:
- Fetch data not only on
componentDidMountbut also oncomponentDidUpdate
- Use
keyto remount component
It cannot be done with just react-router's <Link /> since it is not actually its responsibility
answered Nov 23 at 10:13
skyboyer
3,32111128
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
add a comment |
But my api is not calling again as i put the api call part in the componentDidMount().
You have same route, so the same <Route> is rendered. All nested components stay the same so instead of remounting they are just updated.
You have few possible ways to handle that:
- Fetch data not only on
componentDidMountbut also oncomponentDidUpdate
- Use
keyto remount component
It cannot be done with just react-router's <Link /> since it is not actually its responsibility
answered Nov 23 at 10:13
skyboyer
3,32111128
But my api is not calling again as i put the api call part in the componentDidMount().
You have same route, so the same <Route> is rendered. All nested components stay the same so instead of remounting they are just updated.
You have few possible ways to handle that:
- Fetch data not only on
componentDidMountbut also oncomponentDidUpdate
- Use
keyto remount component
It cannot be done with just react-router's <Link /> since it is not actually its responsibility
answered Nov 23 at 10:13
skyboyer
3,32111128
answered Nov 23 at 10:13
skyboyer
3,32111128
answered Nov 23 at 10:13
skyboyer
3,32111128
answered Nov 23 at 10:13
skyboyer
3,32111128
3,32111128
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
add a comment |
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
Thanks for your quick response. can you please show me the example as it's urgent.
– user10298495
Nov 23 at 10:21
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
you are saying, i need to use componentDidUpdate and call the api again.If i need to call the api again then i can call a function onClick of it, in which the api will call.But this is the wrong approach.
– user10298495
Nov 23 at 11:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444497%2fcomponent-not-re-rendering-on-clicking-of-a-link%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please add a code example to your question showing us how you are doing this?
– c-chavez
Nov 23 at 10:11
i have edited the code.
– user10298495
Nov 23 at 10:52
so it's not only route the same. the only parameter is also equal. why do you even use
<Link>here? something like<button onClick={this.loadData}>would reload the data just fine.– skyboyer
Nov 23 at 12:28
OnClick of a Link, I am calling the api again, But that is the wrong approach, which i am following.Is there any lifecycle method, which help me to call the api again?
– user10298495
Nov 24 at 7:04