घटक को रोकें रेक्ट-राउटर

Question

के साथ अनमाउंट किया जाना चाहिए जब मैं React-Router घटक की बात करता हूं तो मैं डफर हूं। हालांकि, जब मैं लिंक के माध्यम से चलता हूं तो मैं अपने घटकों को अनमाउंट क्यों कर सकता हूं, इस बारे में स्पष्टीकरण नहीं मिला? और इसे कैसे रोकें?

मेरे उदाहरण में मैं एक घटक है कि टाइमर और द्वारा

सामग्री फिर से प्रस्तुत करना मैं एक त्रुटि मिल गया है:

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

:

यहाँ ReactJS कोड है आपके मामले में प्रतिक्रिया-राउटर अपेक्षा के अनुसार काम कर रहा है, अगर आप अपने ऐप में टाइमर दिखाना चाहते हैं तो आपको इलाज करने की आवश्यकता है एक घटक है और एक दृश्य नहीं

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

यदि आप अनमाउंट किए बिना फिर से घटक दिखाना चाहते हैं तो आप इसे हमेशा दिखा सकते हैं और मार्गों को छोड़ते समय छुपा सकते हैं। इस जगह आप सक्षम बाहर लक्ष्य मार्ग प्राप्त करने के लिए, उदाहरण के लिए आप unmout से ProjectsList रोकने हैं: App में

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

1. प्लेस ProjectsList और इस तरह के प्रॉक्सी घटक बनाने के बजाय component={ProjectsList}:

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

दिखेगी इसलिए:

<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 घटक में style संपत्ति को संभालने के लिए