在Route中提供给`Route`的prop`component`无效。道具问题？

Question

在使用React-Router时，我在使用主要App组件时会遇到一些问题。以下是我的index.js代码：

const React = require('react');
const ReactDOM = require('react-dom');

// React router goodies
import { Router, Route, browserHistory, IndexRoute } from 'react-router';    //All pieces of the router object

const App = require('./components/App.jsx');
const SingleMatchup = require('./components/SingleMatchup.jsx');

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Route path='/teams' component={SingleMatchup}>
      </Route>
    </Route>
  </Router>,
  document.getElementById('app')
);

这是我试图渲染的App组件：

import React from 'react';
import {render} from 'react-dom';
import Matchups from './Matchups.jsx';
import {Jumbotron} from 'react-bootstrap';
import NavBar from './NavBar.jsx';
import axios from 'axios';
import gameLogs from '../gameLogs.js'

export default class App extends React.Component {


  componentDidMount() {
    for(var team in gameLogs) {
      let teamToUpdate = team
      axios.post('/stats', {team: teamToUpdate})
    }
  }

  render () {
    return (
        <div>
        <NavBar />
         <Jumbotron>
          <h1>Hello, world!</h1>
          <p>This is a simple hero unit</p>
        </Jumbotron>
        <Matchups />
        </div>
    );
  }
}

我想知道问题是否与传递道具有关，或者它们是否与渲染其他组件的组件有关？任何帮助将不胜感激。