Failed propType: Invalid prop 'children' supplied to 'Router'

I created a project to study react and I'm trying to uncouple my Header from the app by creating a component for it. I created a Header.jsx file and passed the code there but I am getting the following error:

  

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'))

Any idea what's going on?