{this.props.children}はnullを返します

Question

私はこのチュートリアルhttp://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760395から反応するjsを勉強していますが、this.props.childrenを使用しようとすると同じ問題が発生します。誰が何が間違っているか教えてくれますか？

は、これが私のmain.js

var React= require('react'); 
var Main= React.createClass({ 
    render:function(){ 
     console.log (this) 
     return(
      <div className='main-container'>Hello from main 
      {this.props.children} 
      </div> 
     ) 
    } 
}); 

module.exports = Main; 

これは私の自宅

var React = require('react'); 
var transparentBG=('../style').transparentBG; 
var ReactRouter=require('react-router'); 
var Link = ReactRouter.Link; 

var Home = React.createClass({ 
    render: function() { 
    return (
     <div className='jumbotron col-sm-12 text-center' style={transparentBG}> 
     <h1>git hub battle</h1> 

     <p className='lead'> Some fancy motto</p> 

     <Link to='/playerone'> 

      <button type='button' className='btn btn-lg btn-sucess'> 
      get started 
      </button> 
     </Link> 

     </div> 
    ) 
    } 
}); 


module.exports = Home; 

であり、あなたのルートがある必要があり、これは私のルート

var React= require('react'); 
var ReactRouter= require('react-router'); 


var Router=ReactRouter.Router; 
var Route=ReactRouter.Route; 
var IndexRoute=ReactRouter.IndexRoute; 

var Main=require ('../components/Main'); 
var Home=require ('../components/Home'); 
var PromptContainer=require('../container/PromptContainer'); 

var routes=(

    <Router> 
     <Route path='/'component={Main}> 
     <Route path='/home' component={Home}/> 
     </Route> 
     <Route path='/'> 
      <Route path='playerone' header='player one'component={PromptContainer}/> 
      <Route path='playertwo/:playerone' header='player two' component={PromptContainer}/> 

      </Route> 
    </Router> 

); 

module.exports = routes; 

Answer 1

ある

var routes=(

    <Router> 
     <Route path='/'component={Main}> 
      <Route path='/home' component={Home}/> 
      <Route path='playerone' header='player one'component= {PromptContainer}/> 
      <Route path='playertwo/:playerone' header='player two' component={PromptContainer}/> 
     </Route> 
    </Router> 

); 

Answer 2

react-routerにはIndexRouteを追加できます。

HomeをIndexRouteを持つファーストクラスのルートコンポーネントにすることです。

<Router> 
    <Route path='/'component={Main}> 
     <IndexRoute component={Home}/> 
     <Route path='playerone' header='player one'component= {PromptContainer}/> 
     <Route path='playertwo/:playerone' header='player two' component={PromptContainer}/> 
    </Route> 
</Router> 

次にレンダリングすることができる{this.props.children}