Trouble Setting up React-Router

Question

So I've been having a lot of trouble getting react-router set up. I've looked at multiple tutorials and guides, as well as the documentation and I just cant tell whats wrong, I would really appreciate any help.

Here is a link to my project on github if you want to look at more code but i think most of the react-router code is commented out there: 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;

So Basically as far as I know these are the 3 components needed to get react-router working but my render function is not working.

Woohoo I fixed it! there were multiple issues here long story short, make sure the tutorials you're following are up to date here is my final solution:

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;

                

Answer 1

It looks like you've been referencing a mixture of old (0.13) and new (1.0) examples.

In 1.0:

• All React Router components are named exports
• DefaultRoute was replaced with IndexRoute
• {this.props.children} replaces use of <RouteHandler/>, as React Router now creates React elements with route components and passes them in

As such, your imports should look like this:

var { Router, Route, IndexRoute, Link } = require('react-router')

The upgrade guide for 1.0 is a convenient way to check if any examples you may have copied are now out of date.