React-router: type.toUpperCase is not a function

Question

when I first to use react-router, but page gives me this error below

React-router: type.toUpperCase is not a function

var React = require('react');
var Router = require('react-router');

var Route = Router.Route;

var App = React.createClass({

  render: function() {
    return (
      <div>App</div>
    );
  }
});

React.render((
  <Router>
    <Route path="/" component={App} />
  </Router>
), document.getElementById('app'));

it seems nothing wrong from the document, some one could help me?

where error comes here

function autoGenerateWrapperClass(type) {
    return ReactClass.createClass({
      tagName: type.toUpperCase(),
      render: function() {
        return new ReactElement(
          type,
          null,
          null,
          null,
          null,
          this.props
        );
      }
    });
  }

Answer 1

change the require statements:

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

Answer 2

The error you posted is cryptic but what it means is you are trying to render a component out of a variable that is not a real component. For example, you could do this and get the same kind of error:

render: function() {
  var Thing = {};  // not a component
  return <Thing />;  // same error
}

In the code you posted, <Router> maps to a variable that is a module, not a component. You can fix it with a new variable declaration:

var React = require('react');

var routerModule = require('react-router');
var Router = routerModule.Router;  // component

var Route = routerModule.Route;

var App = React.createClass({

  render: function() {
    return (
      <div>App</div>
    );
  }
});

React.render((
  <Router>
    <Route path="/" component={App} />
  </Router>
), document.getElementById('app'));

Answer 3

I was getting the same error. Then I figure out that I did mistake while exporting my components. In one component I wrote module.export instead of module.exports. So, please check if you have done the same mistake.

Answer 4

I had the same error, it was circle dependency.

component1.jsx :

var Component1 = require('./component2.jsx');

component2.jsx :

var Component2 = require('./component1.jsx');

Seen like this, this is obvious, but the error message is very opaque.

Answer 5

if you use react-router v0.13.3 replace Router on Route, like this:

var routes = (
  <Route>
    <Route path="/" component={App} />
  </Route>
);

Router.run(routes, function(Root) {
 React.render(<Root />, document.getElementById('app'));
});