6

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

10
  • 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
    Commented Sep 26, 2017 at 8:35
  • Can you provide the relevant code with setInterval?
    – Marian
    Commented Sep 26, 2017 at 8:35
  • @hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000)
    – John
    Commented Sep 26, 2017 at 8:40
  • @Chris . this is my code for link: <Link to={'/'+id} >user</Link>
    – John
    Commented Sep 26, 2017 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.
    – Marian
    Commented Sep 26, 2017 at 8:43

3 Answers 3

12

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

4
  • Can i use react-router with 'react-router-dom ?
    – John
    Commented Sep 26, 2017 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. Commented Sep 26, 2017 at 9:13
  • What i should change in the code of create my routes to be work in react-router-dom ?
    – John
    Commented Sep 26, 2017 at 9:21
  • Check out this awesome article medium.com/@pshrmn/…. PS: don't forget to upvote my answer in the end. Commented Sep 26, 2017 at 9:30
3

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);
   }
10
  • Please check this solution and let me know if it works out for you Commented Sep 26, 2017 at 9:15
  • yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
    – John
    Commented Sep 26, 2017 at 9:23
  • did you change you componentDidMount function too to store the returned value of setInterval function Commented Sep 26, 2017 at 9:25
  • yes , the problem is why despite i am in the route of {User} component but th error is in the other component !!
    – John
    Commented Sep 26, 2017 at 9:29
  • Its because of setInterval, since it is not getting cleared when you navigate away Commented Sep 26, 2017 at 9:29
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.

4
  • No , dont work and the App component not work , in my "/" route i haven't any view if i add this indexroute.
    – John
    Commented Sep 26, 2017 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 Commented Sep 26, 2017 at 8:48
  • I use "react-router": "^2.8.1"
    – John
    Commented Sep 26, 2017 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. :) Commented Sep 26, 2017 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.