DefaultRoute бросает «Не может вызвать класс как функция»

Question

я использую реагировать-маршрутизатор с классами ES6 и продолжает бросать ошибку

Uncaught TypeError: Cannot call a class as a function

Это относится к декларации маршрута по умолчанию. Большая часть кода взята из примера в ретрансляции реакции-маршрутизатора, поэтому я задаюсь вопросом, почему он глючит.

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

Почему вы оберточной App компонент создания с createFactory вызова?

Следующие прекрасно работает со мной (я только что удалил 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); 
});