this.props.children is null on a nested route

My router is something like the below

Router.jsu3000- only its main part

<Router history={browserHistory}>
  <Route component={App}>
    <Route path="/test1" component={Test1}>
      <Route component={Test2}/>
    </Route>
  </Route>
</Router>   

App.js

class App extends React.Component {

  constructor(props) {
    super(props)
    console.log('app', this.props.children) //this object is outputted
  }

  render() {
    retu (
      <div id="app">
        {this.props.children}
      </div>
    )
  }

}

export default App   

Test1

import React from "react"

class Test1 extends React.Component {

  constructor(props) {
    super(props)
    console.log('test1', this.props.children) //children is null!! Why?
  }

  render() {
    retu (
      <div id="test1">
        {this.props.children}
      </div>
    )
  }

}

export default Test1

Test2.js

import React from "react"

class Test2 extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    retu (
      <div id="test2">
        Hello World!!
      </div>
    )
  }

}

export default Test2

"Hello World" of Test2.js is not outputted because this.props.children of Test1.js is null. What's wrong with this code?