DefaultRoute 抛出 "Cannot call a class as a function"

Question

我在 ES6 中使用 react-router 类，它一直抛出错误

Uncaught TypeError: Cannot call a class as a function

指的是默认路由的声明。大部分代码取自 react-router repo 中的示例，这就是为什么我想知道为什么它有问题。

import React from 'react';
import Router from 'react-router';

import {Header} from './components/Header.react.jsx';

var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var App = React.createFactory(React.createClass({
  render: function () {
    return (
      <div>
        <Header />
        <RouteHandler />
      </div>
    );
  }
}));


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


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


Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

Answer 1

为什么要用 createFactory 调用包装 App 组件创建？

以下对我来说工作得很好（我刚刚删除了 Header 因为它是外部的）：

import React from 'react';
import Router from 'react-router';


var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

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


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


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


Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

DefaultRoute 抛出 "Cannot call a class as a function"

DefaultRoute throws "Cannot call a class as a function"

javascript

ecmascript-6

reactjs

react-router