How to use <Link> react router?

5
votes

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

3
reactjsreact-router
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
Can you provide the relevant code with setInterval? – hlfrmn
@hlfrmn .this is my code setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');},1000) – John
@Chris . this is my code for link: <Link to={'/'+id} >user</Link> – John
@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

3 Answers

10
votes

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

3
votes

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);
   }
0
votes

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.