Prevent component unlocking with React-router

Question

I use duffer when it comes to the React-Router component. However, I could not find an explanation why my components are unmounted when I look through the links? And how to prevent it?

In my example, I have a component containing a timer and re-rendering content

There was an error:

Here is the 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 to show the component again without unmounting, you can always show it and hide it when the routes leave. To reach this place, you get a competent external target route, for example, you want to prevent ProjectsList from unmout:

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

1. Put ProjectsList in the App and instead create the following proxy component component={ProjectsList} :

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

It will look like this:

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

2. In the top-level App component, simply check this property ( showProjects ) to decide whether to show projects or not:

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

Remember to handle the style property in the ProjectList component.

Answer 2

in your case, the reaction-router works as expected, if you want the timer to be visible throughout the application, you need to consider the component, not the view

 /*global define, Backbone, React, $, Request, Router, Route, Link */ var App = React.createClass({ render: function () { return ( <div> <h1>App</h1> // this will not unmount when routes are changed <Timer /> <ul> <li><Link to="/about">About</Link></li> </ul> // this will unmount/mount when routes are changed {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> </Router> ), document.body);