{this.props.children}返回null

Question

I am studying react js, from this tutorial http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760395 but i keep having the same issue when i try to use this.props.children. can anyone tell me what's wrong?

this is my 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; 

this is my home

 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;

and this is my route

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

Your routes should be

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 allows you to add IndexRoute .

making Home be a first class route component with 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>

Now can render {this.props.children}