React Router - 在编写路由时提供给`Router`的无效prop`child`

Question

为什么当我在路由器内提供路由时一切都很好但是当我编写如下路线时,我得到了一个

warning.js:36 Warning: Failed prop type: Invalid prop儿童supplied to路由器. in Router (at index.js:62) in Root (at index.js:70)

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

我已经尝试了所有的变化.是否有可能撰写路线？任何帮助赞赏.

Answer 1

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