React Router-組成路線時提供給`Router`的無效道具`children'

Question

為什么當我在路由器中提供路由時一切都很好，但是當我編寫如下所示的路由時卻得到一個

warning.js:36 Warning: Failed prop type: Invalid prop supplied to Router的warning.js:36 Warning: Failed prop type: Invalid prop子warning.js:36 Warning: Failed prop type: Invalid prop . in Router (at index.js:62) in Root (at index.js:70) . in Router (at index.js:62) in Root (at index.js:70)

和一個

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