CODEWITHSUNDEEP
javascriptreactjsreact-router
pedronalbert
pedronalbert

Reputation: 2716

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

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
      );
    }
  });
}

Upvotes: 17

Views: 11879

Answers (4)

Dan Abramov
Dan Abramov

Reputation: 268235

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

Upvotes: 16

diomampo
diomampo

Reputation: 11

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

Upvotes: 1

whitetrefoil
whitetrefoil

Reputation: 85

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

Upvotes: 0

Phi Nguyen
Phi Nguyen

Reputation: 3056

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);
});

Upvotes: 1

Related Questions