React Router - Invalid prop `children` supplied to `Router` when composing routes

Question

Why is it that when I supply the routes within the router all is good but when I compose the routes like below I get a

warning.js:36 Warning: Failed prop type: Invalid propchildrensupplied toRouter. in Router (at index.js:62) in Root (at index.js:70)

and a

browser.js:49 Warning: [react-router] Location "/contact" did not match any routes

import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';

class Navigation extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to='/'>Main</Link></li>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/contact'>Contact</Link></li>
        </ul>
      </div>
    );
  }
};

class Contact extends Component {
  render() {
    return <div>Contact</div>;
  }
}

class About extends Component {
  render() {
    return ( <div>About</div> );
  }
}

class Home extends Component {
  render() {
    return <div>Home</div>;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}


const routes = () => (
  <Route path='/' component={App}>
    <IndexRoute component={Home} />
    <Route path='about' component={About} />
    <Route path='contact' component={Contact} />
  </Route>
)

export default class Root extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        {routes}
      </Router>
    );
  }
}

ReactDOM.render(
  <Root  />,
  document.getElementById('root')
)

I've tried just about all variations. Is it possible to compose routes? Any help appreciated.

Answer 1

export default class Root extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        {routes()}
      </Router>
    );
  }
}