Criei um projeto para estudar react e estou tentando desacoplar o meu Header do app criando um componente para ele. Criei um arquivo `Header.jsx` e passe o código para lá mas estou recebendo o seguinte erro:

>  Failed propType: Invalid prop `children` supplied to `Router`. Check
> the render method of `Header`.

**Header.jsx**

    import React, { Component, PropTypes } from 'react';
    import Link from 'react-router';
    import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';
    
    const activeClassName = 'active';
    
    class Header extends Component{
      render() {
        <div>
          <Header title="React SaaS" scroll>
            <Navigation>
              <Link activeClassName={activeClassName} to="/home">Home</Link>
              <Link activeClassName={activeClassName} to="/login">Login</Link>
            </Navigation>
          </Header>
          <Drawer title="React SaaS">
            <Navigation>
              <Link to="/home">Home</Link>
              <Link to="/login">Login</Link>
            </Navigation>
          </Drawer>
        </div>
      }
    };
    
    Header.propTypes = {
      children: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.arrayOf(PropTypes.element),
      ]),
    };
    
    export default Header;

**app.jsx**

    import React from 'react';
    import ReactDOM from 'react-dom'
    import Router from 'react-router';
    import { IndexRoute, Link, Route } from 'react-router';
    import ReactMDL from 'react-mdl';
    import { Layout , Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';
    
    import Header from './components/Header.jsx';
    import Login from './components/Login.jsx';
    import Home from './components/Home.jsx';
    
    class App extends React.Component{
      render() {
        return (
          <div className="big-content" style={{height: '300px', position: 'relative'}}>
            <Layout>
              <Header />
              <div className="wrapper">
                  {this.props.children}
              </div>
            </Layout>
          </div>
        )	;
      }
    };
    
    let routes = (
      <Route path="/" component={App}>
        <Route path="home" component={Home}/>
        <Route path="login" component={Login}/>
      </Route>
    );
    
    ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'))

Alguma ideia do que está acontecendo?