Prevent component be unmounted with React-router

Question

I am duffer when it comes to React-Router 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 ?

In my example I have a component that contains timer and re-render content by

I got an error:

Here is ReactJS code :

/*global define, Backbone, React, $, Request, Router, Route, Link */

var App = React.createClass({
    render: function () {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/timer">Timer</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
});

var About = React.createClass({
    render: function () {
        return <h3>Here is about page</h3>
    }
});

var Timer = React.createClass({
    getInitialState: function() {
        return {counter: 0};
    },
    render: function () {
        return (
            <div>
                <h2>Time is running over...</h2>
                <b>{this.props.interval}</b>
                <p>{this.state.counter}</p>
            </div>
        )
    },
    componentDidMount: function () {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, 1000);
    },
    loadCommentsFromServer: function () {
        this.setState({counter: this.state.counter + 1});
    }
});

React.render((
    <Router location="history">
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="timer" component={Timer} />
        </Route>
    </Router>
), document.body);

Answer 1

If you want show component again without unmount you can show it always and hide when routes leave. To achieve this place you competent outside target route, for example you want prevent ProjectsList from unmout:

   <Route path="/" component={App}>
        <IndexRoute component={ProjectsList} />
        .....

1. Place ProjectsList into App and create such proxy component instead component={ProjectsList}:

  const LayoutToogler = () => (<div></div>);

Will look so:

    <Route path="/(mobile.html)" component={App}>
        <IndexRoute component={LayoutToogler} showProjects={true}/>

2. In top level App component just check this property (showProjects) to decide show projects or not:

          <ProjectsList
            style={{display:this.props.children.props.route.showProjects?'block':'none'}}
                   />
   

Don't forget to handle style property in your ProjectList component