title: Prevent component be unmounted with React-router
body: <p>I am duffer when it comes to <a href="https://github.com/rackt/react-router/blob/master/docs/Introduction.md">React-Router</a> component. However I was not able to find explanation of why my components become unmount when I walk through links? And how to prevent it ?</p>
  
  <p>In my example I have a component that contains timer and re-render content by </p>
  
  <p>I got an error:</p>
  
  <p><a href="https://i.stack.imgur.com/TpzkL.png"><img src="https://i.stack.imgur.com/TpzkL.png" alt="enter image description here"></a> </p>
  
  <p>Here is ReactJS code :</p>
  
  <pre><code>/*global define, Backbone, React, $, Request, Router, Route, Link */
  
  var App = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  &lt;h1&gt;App&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to="/timer"&gt;Timer&lt;/Link&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  {this.props.children}
              &lt;/div&gt;
          )
      }
  });
  
  var About = React.createClass({
      render: function () {
          return &lt;h3&gt;Here is about page&lt;/h3&gt;
      }
  });
  
  var Timer = React.createClass({
      getInitialState: function() {
          return {counter: 0};
      },
      render: function () {
          return (
              &lt;div&gt;
                  &lt;h2&gt;Time is running over...&lt;/h2&gt;
                  &lt;b&gt;{this.props.interval}&lt;/b&gt;
                  &lt;p&gt;{this.state.counter}&lt;/p&gt;
              &lt;/div&gt;
          )
      },
      componentDidMount: function () {
          this.loadCommentsFromServer();
          setInterval(this.loadCommentsFromServer, 1000);
      },
      loadCommentsFromServer: function () {
          this.setState({counter: this.state.counter + 1});
      }
  });
  
  React.render((
      &lt;Router location="history"&gt;
          &lt;Route path="/" component={App}&gt;
              &lt;Route path="about" component={About} /&gt;
              &lt;Route path="timer" component={Timer} /&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  ), document.body);
  </code></pre>