reactjs - React Router - 编写路由时向 `children` 提供的无效 prop `Router`

Question

为什么当我在路由器内提供路由时一切都很好，但是当我像下面这样编写路由时我得到一个

warning.js:36 警告:失败的 prop 类型:无效的 propchildren 提供给Router。
在路由器中(位于index.js:62)
在根目录中(位于index.js:70)

和一个

browser.js:49 警告:[react-router] 位置“/contact”与任何路由都不匹配

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>
    );
  }
}