React-router：组件未定义

Question

我一直在浏览 here 找到的 react-router 教程，目前我很困惑......

React-router 无法识别我的组件。

（我正在使用带有 Rails 的 React.js）

代码如下：

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

如果我在 App 之前移动 TagsBox，它会起作用，但似乎没有其他人这样做。我错过了什么？

如果它有所不同，我的组件的当前结构是：

• app.js.jsx
• 标签
  • _tags_box.js.jsx

Answer 1

在您看来，最好在加载所有脚本后运行路由器。

尝试在这段代码中封装run 方法：

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