How to use react router?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I am working with reactjs and react router.
I have create my router as:
ReactDOM.render(
<Router history={browserHistory}>
<Route exact path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
And in the App component I have a Link to the "/:id" path :
<Link to={'/'+id} >
when I am in the "/" route, my view works fine but now when I click my link, the path changes and my view changes for an instant and then gives an error in the App component (It is the component of the other route) .
I use "react-router": "^2.8.1".
PS: the error is in the setinterval function in the component {App}.
Thanks for any help in advance
reactjs react-router
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
|
show 5 more comments
1
I am working with reactjs and react router.
I have create my router as:
ReactDOM.render(
<Router history={browserHistory}>
<Route exact path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
And in the App component I have a Link to the "/:id" path :
<Link to={'/'+id} >
when I am in the "/" route, my view works fine but now when I click my link, the path changes and my view changes for an instant and then gives an error in the App component (It is the component of the other route) .
I use "react-router": "^2.8.1".
PS: the error is in the setinterval function in the component {App}.
Thanks for any help in advance
reactjs react-router
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
Please show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Can you provide the relevant code withsetInterval?
– hlfrmn
Sep 26 '17 at 8:35
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Developper Could you please post a larger chunk of your App component - including thesetintervalfunction, theLinkand preferably the rest of it - it one chunk.
– hlfrmn
Sep 26 '17 at 8:43
|
show 5 more comments
1
1
1
I am working with reactjs and react router.
I have create my router as:
ReactDOM.render(
<Router history={browserHistory}>
<Route exact path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
And in the App component I have a Link to the "/:id" path :
<Link to={'/'+id} >
when I am in the "/" route, my view works fine but now when I click my link, the path changes and my view changes for an instant and then gives an error in the App component (It is the component of the other route) .
I use "react-router": "^2.8.1".
PS: the error is in the setinterval function in the component {App}.
Thanks for any help in advance
reactjs react-router
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
I am working with reactjs and react router.
I have create my router as:
ReactDOM.render(
<Router history={browserHistory}>
<Route exact path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
And in the App component I have a Link to the "/:id" path :
<Link to={'/'+id} >
when I am in the "/" route, my view works fine but now when I click my link, the path changes and my view changes for an instant and then gives an error in the App component (It is the component of the other route) .
I use "react-router": "^2.8.1".
PS: the error is in the setinterval function in the component {App}.
Thanks for any help in advance
reactjs react-router
reactjs react-router
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
edited Sep 26 '17 at 10:48
Shubham Khatri
97.9k15126166
97.9k15126166
asked Sep 26 '17 at 8:32
JohnJohn
2119
asked Sep 26 '17 at 8:32
JohnJohn
2119
asked Sep 26 '17 at 8:32
JohnJohn
2119
2119
Please show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Can you provide the relevant code withsetInterval?
– hlfrmn
Sep 26 '17 at 8:35
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Developper Could you please post a larger chunk of your App component - including thesetintervalfunction, theLinkand preferably the rest of it - it one chunk.
– hlfrmn
Sep 26 '17 at 8:43
|
show 5 more comments
Please show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Can you provide the relevant code withsetInterval?
– hlfrmn
Sep 26 '17 at 8:35
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Developper Could you please post a larger chunk of your App component - including thesetintervalfunction, theLinkand preferably the rest of it - it one chunk.
– hlfrmn
Sep 26 '17 at 8:43
Please show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Please show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Can you provide the relevant code with
setInterval?– hlfrmn
Sep 26 '17 at 8:35
Can you provide the relevant code with
setInterval?– hlfrmn
Sep 26 '17 at 8:35
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Developper Could you please post a larger chunk of your App component - including the
setinterval function, the Link and preferably the rest of it - it one chunk.– hlfrmn
Sep 26 '17 at 8:43
@Developper Could you please post a larger chunk of your App component - including the
setinterval function, the Link and preferably the rest of it - it one chunk.– hlfrmn
Sep 26 '17 at 8:43
|
show 5 more comments
3 Answers
3
active
oldest
votes
0
The reason that you get
TypeError: Cannot set property 'innerHTML' of null
is because you are not clearing the interval when you are navigating away from the App component and since it still is running, it tries to access
document.getElementId("demo") which is no longer there
what you need to do is clear the timer on componentWillUnmount
componentDidMount(){
this.interval = setInterval(function(){
document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
},1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
|
show 7 more comments
2
Try to use this on the top:
import { Link } from 'react-router-dom'
refer to this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
add a comment |
0
Include this at the top import { IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<IndexRoute path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
This will distinguish your main root path with the other path.
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
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
});
}
});
draft saved
draft discarded
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%2f46421496%2fhow-to-use-link-react-router%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The reason that you get
TypeError: Cannot set property 'innerHTML' of null
is because you are not clearing the interval when you are navigating away from the App component and since it still is running, it tries to access
document.getElementId("demo") which is no longer there
what you need to do is clear the timer on componentWillUnmount
componentDidMount(){
this.interval = setInterval(function(){
document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
},1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
|
show 7 more comments
0
The reason that you get
TypeError: Cannot set property 'innerHTML' of null
is because you are not clearing the interval when you are navigating away from the App component and since it still is running, it tries to access
document.getElementId("demo") which is no longer there
what you need to do is clear the timer on componentWillUnmount
componentDidMount(){
this.interval = setInterval(function(){
document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
},1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
|
show 7 more comments
0
0
0
The reason that you get
TypeError: Cannot set property 'innerHTML' of null
is because you are not clearing the interval when you are navigating away from the App component and since it still is running, it tries to access
document.getElementId("demo") which is no longer there
what you need to do is clear the timer on componentWillUnmount
componentDidMount(){
this.interval = setInterval(function(){
document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
},1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
The reason that you get
TypeError: Cannot set property 'innerHTML' of null
is because you are not clearing the interval when you are navigating away from the App component and since it still is running, it tries to access
document.getElementId("demo") which is no longer there
what you need to do is clear the timer on componentWillUnmount
componentDidMount(){
this.interval = setInterval(function(){
document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
},1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
answered Sep 26 '17 at 9:03
Shubham KhatriShubham Khatri
97.9k15126166
97.9k15126166
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
|
show 7 more comments
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
Please check this solution and let me know if it works out for you
– Shubham Khatri
Sep 26 '17 at 9:15
No it not working :(
– John
Sep 26 '17 at 9:16
No it not working :(
– John
Sep 26 '17 at 9:16
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
do you still see the same error
– Shubham Khatri
Sep 26 '17 at 9:17
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
– John
Sep 26 '17 at 9:23
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
did you change you componentDidMount function too to store the returned value of setInterval function
– Shubham Khatri
Sep 26 '17 at 9:25
|
show 7 more comments
2
Try to use this on the top:
import { Link } from 'react-router-dom'
refer to this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
add a comment |
2
Try to use this on the top:
import { Link } from 'react-router-dom'
refer to this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
add a comment |
2
2
2
Try to use this on the top:
import { Link } from 'react-router-dom'
refer to this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
Try to use this on the top:
import { Link } from 'react-router-dom'
refer to this: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
edited Nov 17 '18 at 7:20
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
answered Sep 26 '17 at 8:59
Vikas YadavVikas Yadav
1,56511618
1,56511618
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
add a comment |
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
Can i use react-router with 'react-router-dom ?
– John
Sep 26 '17 at 9:01
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
react-router-dom is now supported with new versions. Better to use react-router-dom instead of react-router. It might also enhance performance of your app.
– Vikas Yadav
Sep 26 '17 at 9:13
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
What i should change in the code of create my routes to be work in react-router-dom ?
– John
Sep 26 '17 at 9:21
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end.
– Vikas Yadav
Sep 26 '17 at 9:30
add a comment |
0
Include this at the top import { IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<IndexRoute path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
This will distinguish your main root path with the other path.
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
add a comment |
0
Include this at the top import { IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<IndexRoute path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
This will distinguish your main root path with the other path.
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
add a comment |
0
0
0
Include this at the top import { IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<IndexRoute path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
This will distinguish your main root path with the other path.
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
Include this at the top import { IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<IndexRoute path="/" component={App} />
<Route path="/:id" component={User} />
</Router>,
document.getElementById('root')
);
This will distinguish your main root path with the other path.
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
answered Sep 26 '17 at 8:41
Adeel ImranAdeel Imran
3,37512045
3,37512045
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
add a comment |
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
– John
Sep 26 '17 at 8:47
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
@Developper, IndexRoute is not a part of react-router v4 so this won't work if you are using the same verison
– Shubham Khatri
Sep 26 '17 at 8:48
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
I use "react-router": "^2.8.1"
– John
Sep 26 '17 at 8:52
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
Kindly update your question, with the version of the react-router you are using so that people can help you out accordingly. :)
– Adeel Imran
Sep 26 '17 at 8:59
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f46421496%2fhow-to-use-link-react-router%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 show your code for your Link and the error you are getting. This is not enough info to help you solve your issue.
– Chris
Sep 26 '17 at 8:35
Can you provide the relevant code with
setInterval?– hlfrmn
Sep 26 '17 at 8:35
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
– John
Sep 26 '17 at 8:40
@Chris . this is my code for link: <Link to={'/'+id} >user</Link>
– John
Sep 26 '17 at 8:41
@Developper Could you please post a larger chunk of your App component - including the
setintervalfunction, theLinkand preferably the rest of it - it one chunk.– hlfrmn
Sep 26 '17 at 8:43