Question

我试图将应用程序移动到React-Router并继续出错。然后我尝试了一个灵感来自github repo的简单例子并得到了同样的错误。可能是一个愚蠢的错误，但我一直在重读代码，但无法找到它的错误。

错误：

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

代码：

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

Answer 1

你错过了r。这样：var RouteHandler = Route.RouteHandler;应为var RouteHandler = Router.RouteHandler;，因为RouteHandler位于Router对象上，而不是Route对象上。

在React-Router中使用的类型/大小写错误

1 个答案: