DefaultRoute引发“无法将类作为函数调用”

Question

I'm using react-router with ES6 classes and it keeps throwing the error

Uncaught TypeError: Cannot call a class as a function

It refers to the declaration of the default route. Most of the code is taken from the example in the react-router repo, which is why I'm wondering why it's buggy.

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

Why are you wrapping App component creation with createFactory call?

The following works just fine with me (I just removed Header since it is external):

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