Link to not rendering the component again
I am using React Link to="" property. I have a url like below.
http://localhost:3000/work/109
After clicking on link, It is successfully going to url like below, But not re-rendering the component again.
http://localhost:3000/work/107
Below is my file, where i am using react-router
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const RouteWithSubRoutes = route => (
<React.Fragment>
<Route exact path="/" render={()=>(<Redirect to="/home" />)}/>
<Route exact path={route.path} render={props => (
<route.component {...props} routes={route.routes} onOpenNav={route.onOpenNav}/>
)} />
</React.Fragment>
);
Is there any other property of React, which i am not using.
Note: I am going to same url, But with diffrence id.
reactjs react-router
|
show 1 more comment
I am using React Link to="" property. I have a url like below.
http://localhost:3000/work/109
After clicking on link, It is successfully going to url like below, But not re-rendering the component again.
http://localhost:3000/work/107
Below is my file, where i am using react-router
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const RouteWithSubRoutes = route => (
<React.Fragment>
<Route exact path="/" render={()=>(<Redirect to="/home" />)}/>
<Route exact path={route.path} render={props => (
<route.component {...props} routes={route.routes} onOpenNav={route.onOpenNav}/>
)} />
</React.Fragment>
);
Is there any other property of React, which i am not using.
Note: I am going to same url, But with diffrence id.
reactjs react-router
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I am using react-router
– user10298495
Nov 23 '18 at 8:02
1
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06
|
show 1 more comment
I am using React Link to="" property. I have a url like below.
http://localhost:3000/work/109
After clicking on link, It is successfully going to url like below, But not re-rendering the component again.
http://localhost:3000/work/107
Below is my file, where i am using react-router
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const RouteWithSubRoutes = route => (
<React.Fragment>
<Route exact path="/" render={()=>(<Redirect to="/home" />)}/>
<Route exact path={route.path} render={props => (
<route.component {...props} routes={route.routes} onOpenNav={route.onOpenNav}/>
)} />
</React.Fragment>
);
Is there any other property of React, which i am not using.
Note: I am going to same url, But with diffrence id.
reactjs react-router
I am using React Link to="" property. I have a url like below.
http://localhost:3000/work/109
After clicking on link, It is successfully going to url like below, But not re-rendering the component again.
http://localhost:3000/work/107
Below is my file, where i am using react-router
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const RouteWithSubRoutes = route => (
<React.Fragment>
<Route exact path="/" render={()=>(<Redirect to="/home" />)}/>
<Route exact path={route.path} render={props => (
<route.component {...props} routes={route.routes} onOpenNav={route.onOpenNav}/>
)} />
</React.Fragment>
);
Is there any other property of React, which i am not using.
Note: I am going to same url, But with diffrence id.
reactjs react-router
reactjs react-router
edited Nov 23 '18 at 8:05
asked Nov 23 '18 at 7:54
user10298495
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I am using react-router
– user10298495
Nov 23 '18 at 8:02
1
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06
|
show 1 more comment
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I am using react-router
– user10298495
Nov 23 '18 at 8:02
1
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I am using react-router
– user10298495
Nov 23 '18 at 8:02
I am using react-router
– user10298495
Nov 23 '18 at 8:02
1
1
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06
|
show 1 more comment
1 Answer
1
active
oldest
votes
you should use 'react-router' params in your Route component path.
also this way new params would send to your component after clicking on Link component.
you could check this.props.match.params to sure it gets update.
then since you want component to re-render you should use getDerivedStateFromProps to get new value and set it to your state.
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
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%2f53442639%2flink-to-not-rendering-the-component-again%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
you should use 'react-router' params in your Route component path.
also this way new params would send to your component after clicking on Link component.
you could check this.props.match.params to sure it gets update.
then since you want component to re-render you should use getDerivedStateFromProps to get new value and set it to your state.
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
add a comment |
you should use 'react-router' params in your Route component path.
also this way new params would send to your component after clicking on Link component.
you could check this.props.match.params to sure it gets update.
then since you want component to re-render you should use getDerivedStateFromProps to get new value and set it to your state.
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
add a comment |
you should use 'react-router' params in your Route component path.
also this way new params would send to your component after clicking on Link component.
you could check this.props.match.params to sure it gets update.
then since you want component to re-render you should use getDerivedStateFromProps to get new value and set it to your state.
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
you should use 'react-router' params in your Route component path.
also this way new params would send to your component after clicking on Link component.
you could check this.props.match.params to sure it gets update.
then since you want component to re-render you should use getDerivedStateFromProps to get new value and set it to your state.
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
answered Nov 23 '18 at 8:43
AlirezaAlireza
1,0871924
1,0871924
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
add a comment |
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
can you please show example?
– user10298495
Nov 23 '18 at 9:42
can you please show example?
– user10298495
Nov 23 '18 at 9:42
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
They are examples on provided links.
– Alireza
Nov 23 '18 at 9:44
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.
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%2f53442639%2flink-to-not-rendering-the-component-again%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
Please see creating a Minimal, Complete, and Verifiable example. We need to see code, in order to assist you.
– FrankerZ
Nov 23 '18 at 7:57
I think you are not using router, it will render the same thing even if a path param is changed
– klvenky
Nov 23 '18 at 7:59
I am using react-router
– user10298495
Nov 23 '18 at 8:02
1
please give a working example. The question is too vague
– klvenky
Nov 23 '18 at 8:03
I edited the code with my file where i am using react-router.
– user10298495
Nov 23 '18 at 8:06