Evitare che il componente venga smontato con React-router

Question

I am duffer quando si tratta del componente React-Router. Tuttavia non sono riuscito a trovare una spiegazione del perché i miei componenti si smontano quando passo attraverso i collegamenti? E come prevenirlo?

Nel mio esempio ho un componente che contiene timer e ri-renderizzare i contenuti di

ho ottenuto un errore:

Ecco il codice ReactJS:

/*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

nel tuo caso react-router funziona come previsto, se vuoi che il timer sia visibile in tutta la tua app allora devi trattare è un componente e non una vista

/*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); 

Answer 2

Se si desidera visualizzare nuovamente il componente senza smontaggio, è possibile mostrarlo sempre e nasconderlo quando i percorsi escono. Per raggiungere questo luogo si competente percorso di destinazione al di fuori, per esempio, si desidera evitare che ProjectsList da Smonta:

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

1. Posizionare ProjectsList in App e creare tale componente proxy invece component={ProjectsList}:

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

guarderà così:

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

2. In cima componente App livello Basta controllare questa struttura (showProjects) per decidere mostrare progetti o non:

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

Non dimenticare di gestire style proprietà nel componente ProjectList