React-маршрутизатор: компонент не определен

Question

я бегу через реакцию маршрутизаторами учебник нашел here и я в настоящее время озадачен ...

React-маршрутизатор не распознает компонент.

(я использую React.js с Rails)

Вот код:

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

var App = React.createClass({ 

    getInitialState: function() { 
    return { 
     showTags: false, 
     current_user: this.props.current_user 
    }; 
    }, 

    _handleToggleTags: function() { 
    this.setState({ 
     showTags: !this.state.showTags 
    }) 
    }, 
    render: function() { 
    return <div> 
     <Header 
     onToggleTags={ this._handleToggleTags } 
     user={this.props.current_user} 
     /> 

     <RouteHandler/> 

     <div id="images"> 
      <ImageBox/> 
     </div> 
    </div>; 
    } 
}); 

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

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

Если переместить TagsBox, прежде чем App он работает, хотя никто не кажется, делая это. Что мне не хватает?

Если это делает другой, нынешняя структура моих компонентов:

• app.js.jsx
• Теги
  • _tags_box.js.jsx

Answer 1

В вашей позиции лучше всего запускать маршрутизатор после загрузки всех скриптов.

Попробуйте обертывание метод run в этом коде:

document.addEventListener("DOMContentLoaded", function() { 
    ReactRouter.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
    }); 
}