CODEWITHSUNDEEP
reactjsreact-router
xav
xav

Reputation: 4251

Type/Case Errors using in React-Router

I was trying to move an app to React-Router and kept getting error. Then I tried a simple example inspired from the github repo and got the same errors. Probably a stupid error but I keep rereading the code but cannot find what is wrong with it.

Errors:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Warning: Only functions or strings can be mounted as React components.
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Code:

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Route.RouteHandler;

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

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

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

var App = React.createClass({
  render: function () {
    return (
      <div>
        <header>
          <ul>
            <li><Link to="app">Dashboard</Link></li>
            <li><Link to="inbox">Inbox</Link></li>
            <li><Link to="calendar">Calendar</Link></li>
          </ul>
          Logged in as Jane
        </header>

        {/* this is the important part */}
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="inbox" handler={Inbox}/>
    <Route name="calendar" handler={Calendar}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

Upvotes: 2

Views: 1060

Answers (1)

Anders Ekdahl
Anders Ekdahl

Reputation: 22933

You're missing an r. This: var RouteHandler = Route.RouteHandler; should be var RouteHandler = Router.RouteHandler; because RouteHandler is on the Router object and not on the Route object.

Upvotes: 2

Related Questions