设置React路由器时出现问题

所以我在设置react路由器时遇到了很多麻烦。我看了很多教程和指南，以及文档，我只是不知道哪里出了问题，我真的很感激任何帮助。

如果你想看更多的代码，这里有一个我在github上的项目链接，但我认为大多数react路由器代码都有评论：https://github.com/ArashDai/simpleStore

edit im updating snippet here

////my Render 
var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Routes = require('./Routes.js');
ReactDom.render( < Router Routes = {
      Routes
    }
    /> ,document.getElementById('main'));
/ ///my Routes
    var React = require('react');
    var Router = require('react-router').Router;
    var Route = require('react-router').Route;
    var IndexRoute = require('react-router').IndexRoute;
    var Link = require('react-router').Link;
    //var { Router, Route, IndexRoute, Link } = require('react-router');
    var Routes = (
      < Route path = '/'
      component = {
        require('./components/App')
      } >
      < IndexRoute component = {
        require('./components/MainBody')
      }
      />
      
           
    </Route >
    )
    module.exports = Routes;
    //// my app
    var React = require('react');
    var Router = require('react-router').Router;
    var Route = require('react-router').Route;
    var IndexRoute = require('react-router').IndexRoute;
    var Link = require('react-router').Link;
    var Header = require('./Header');
    var Footer = require('./Footer');
    var App = React.createClass({
          render: function() {
              return (
                  < div >
                  < Header / >
                  < div className = 'container-fluid' > {
                    this.props.children
                  }
                  < /div>
          <Footer/ >
                  < /div>
      
      )
  }
});
module.exports = App;

所以基本上，据我所知，这是让react路由器工作所需的3个组件，但我的渲染功能不起作用。

哇，我修好了！长话短说，这里有多个问题，确保你下面的教程是最新的，这是我的最终解决方案：

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var IndexRoute = require('react-router').IndexRoute;
var Link = require('react-router').Link;
var Header = require('./Header');
var Footer = require('./Footer');
var App = React.createClass({
  render:function(){
    return(
      <div>
          <Header/>  
          <div className='container-fluid'>
            {this.props.children}
            {React.cloneElement(this.props.children)}
          </div>
          <Footer/>
          
      </div>
      
      )
  }
});
module.exports = App;
//------------------------------------------------------------------------------------
var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var createBrowserHistory = require('history/lib/createBrowserHistory');
var history = createBrowserHistory();
var Header = require('./components/Header');
var MainBody = require('./components/MainBody');
var Footer = require('./components/Footer');
var Routes = require('./Routes.js');
ReactDom.render( <Router history={history} routes={Routes} />,document.getElementById('main'));
                
//-------------------------------------------------------------------------------------
var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var IndexRoute = require('react-router').IndexRoute;
var Link = require('react-router').Link;
var App = require('./components/App')
var MainBody = require('./components/MainBody')
var Routes = (
    <Route path ='/' component ={require('./components/App')}>
      
      <IndexRoute component ={require('./components/MainBody')}/>
       
       
    </Route>
  )
module.exports = Routes;