React-routerでコンポーネントをアンマウントするのを防ぐ

Question

React-Routerコンポーネントに関しては、私はダフィーです。しかし、私はリンクを歩いているときに私のコンポーネントがアンマウントする理由についての説明を見つけることができませんでしたか？それを防ぐ方法は？私はエラーだ

によってタイマーを含むコンポーネントと再レンダリングコンテンツ持って私の例では

：ここ

は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

あなたのケースでは、反応ルータが期待どおりに動作している場合、あなたのアプリケーション全体にタイマーが表示されるようにするには、そして、ではないビュー

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

あなたがアンマウントせずに再構成要素を示したい場合は、常にそれを表示することができますし、ルートが離れるときに非表示にします。代わりにcomponent={ProjectsList}は、このようなプロキシコンポーネントをAppに

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

1. ProjectsListと作成：

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

なります は、たとえば、あなたがのアンマウントからProjectsListを防ぐたい、この場所あなたの有能な外部の目標経路を達成するためにso：

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

2. トップレベルのアプリケーションコンポーネントで

   はちょうどショーのプロジェクトを決定するかしない（showProjects）このプロパティを確認します

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

はあなたProjectListコンポーネント