react-router Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Question

I am trying to use the react-router but when I write a simple route doesn't work and the console show Uncaught TypeError: Cannot read property 'toUpperCase' of undefined.

Otherwise when I use without the react-router that work well

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

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});


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

The error is from this line of the react library

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

Answer 1

You are using examples from 1.0 Beta docs, but you are likely running the latest stable version (0.13). The docs in master are from 1.0 Beta, that's the source of confusion.

Read the docs for the latest stable version: https://github.com/ReactTraining/react-router/tree/master/docs

Answer 2

My guess is when React.render is execute, the Router is not there yet. try this

 var routes = (
  <Route handler={App}>
  </Route>
);

Router.run(routes,(Root) => {
  React.render(<Root/>, document.body);
});

Answer 3

I'm still wrapping my head around react-router, but the first thing I'd check is the version you're using and the docs your referencing. I was able to get it working by doing the following...

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

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});

var routes = (
    <Route handler={App}>
    </Route>
);

window.onload = function() {
    ReactRouter.run(routes, ReactRouter.HistoryLocation, function(Root, state) {
        React.render(
            <Root />,
            document.getElementById('main')
        )
    });
};

Basically what PhInside said, but wrapped in window.onload

Answer 4

Try <Route> instead of <Router> in React.render().