React-Router 1.0.0 Uncaught Error: Invariant Violation: Element type is invalid

Question

I am getting following error while using react-router :-

Can anyone tell me where i am wrong?

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

var React = require('react');
var ReactDOM  = require('react-dom');
var Router = require('react-router');
var Route = Router.Route;


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Welcome</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));

Answer 1

Following lines resolved my error

var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

Answer 2

First of all, sorry for my bad english. I had the same problem and after a few hours, was how a fix that:

1 - You should import the correct modules like Saroj said:

var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

2 - After that, you'll probably have problems with url like "localhost:3000/#/?_k=ckuvup". So, do this:

npm install history --save

...then

var createBrowserHistory = require('history/lib/createBrowserHistory');

and change your Router config for this:

ReactDOM.render((
  <Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
), document.getElementById('content'));

...and Read HERE to understand why do it this way

After do all these things, maybe you get some trouble when you are serving this with gulp server for example. I recommend taking a look here.

Answer 3

Router is a named export in the 1.0.0 API:

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