Ошибка React-router - 'Не удается вызвать метод getRouteAtDepth' из неопределенного '

Question

Я пытаюсь внедрить обработчик реакции в своем приложении. Мой главный файл содержит следующий код:

'use strict'; 

import 'babel/polyfill'; 
import React from 'react/addons'; 
import App from './components/App'; 
import ContentPage from './components/ContentPage'; 
import Dispatcher from './core/Dispatcher'; 
import AppActions from './actions/AppActions'; 
import Router from 'react-router'; 

var { Route, RouteHandler, Link } = Router; 

function run() { 

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

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

} 

Внутри моей App компонента У меня есть этот код:

render() { 
    return (
     <div className="App"> 
     <RouteHandler /> 
     </div> 
    ); 
    } 

Этот код генерирует следующее сообщение об ошибке:

TypeError: Cannot call method 'getRouteAtDepth' of undefined 
    at RouteHandler.createChildRouteHandler 

Если изменить <RouteHandler /> будет непосредственно <ContentPage />, код работает. Любая идея, что я делаю неправильно?

РЕДАКТИРОВАТЬ: По-видимому, я использовал «React starter kit», что делает компонент «App» на сервере, а также. При добавлении ретранслятора к этому компоненту эта ошибка (серверная сторона) начисляется.

Мне не нужен рендеринг на стороне сервера в моем проекте, поэтому удаление этого разрешило мою проблему. Я попытаюсь выяснить, почему это произошло позже, когда у меня есть время.

Answer 1

Попробуйте переместить router в App компонент модуля что-то вроде этого:

var React = require('react'), 
    Router = require('react-router'), 
    Route = Router.Route, 
    RouteHandler = Router.RouteHandler, 
    ContentPage = require('./components/ContentPage'), 
    App, routes; 

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

routes = (
    <Route name="app" path="/" handler={App}> 
     <Route handler={ContentPage}/> 
    </Route> 
); 

module.exports = { 
    run: function() { 
     Router.run(routes, function (Handler) { 
      React.render(<Handler/>, document.body) 
     }); 
    } 
}; 

и присвоить ваш run модуль кажется, что это:

var AppRunner = require('./component/App'); 
AppRunner.run(); 

Просто реорганизовать это в ES6 образом, я надеюсь, это поможет вам.