将组件添加到每个 reactJS 组件

Question

我正在尝试在所有页面的顶部放置一个导航栏。这是路由器：

App = React.createClass({
    render: function() {
        <div>
            <NavBar />
            <Locations hash className="Router">
                <Location path="/" handler={MainPage} />
                <Location path="/help" handler={HelpPage} />
                <Location path="/about" handler={AboutPage} />
                <NotFound handler={NotFoundPage} />
            </Locations>
        </div>
    }
});

注意Locations 标记中的哈希参数。当我这样使用路由器时，<NavBar /> 组件中的链接不使用哈希。但是，如果我在每个单独的组件中包含<NavBar />，那么哈希链接将按预期工作。是否有一个地方可以包含<NavBar />，以便在路由器显示的所有页面上呈现它？

Answer 1

通过将路由器从 react-router-component 切换到 react-router 解决。

var App = React.createClass({
  render: function() {
    return (
      <div>
        <NavBar />
        {this.props.activeRouteHandler}
      </div>
    );
  }
});

React.renderComponent((
  <Route handler={App}>
    <Route name="main" path="/" handler={MainPage}/>
    <Route name="help" handler={HelpPage}/>
    <Route name="about" handler={AboutPage}/>
    <Route name="notfound" path="*" handler={NotFoundPage}/>
  </Route>
), document.body);