DefaultRoute 抛出“不能将类作为函数调用”答案

【问题标题】：DefaultRoute throws "Cannot call a class as a function"DefaultRoute 抛出“不能将类作为函数调用”
【发布时间】：2015-06-05 06:30:43
【问题描述】：

我正在使用带有 ES6 类的 react-router，它一直抛出错误

未捕获的类型错误：无法将类作为函数调用

指的是默认路由的声明。大部分代码取自 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);
});

【问题讨论】：

要么使用旧版本的转译器进行转换，要么使用旧版本的 react-router。
我从 tranceur 切换到 babelify 并更新了 react-router，它现在可以工作了。

标签： javascript reactjs ecmascript-6 react-router

【解决方案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);
});

【讨论】：

你用的是什么转译器？