javascript - Add component to every reactJS component

Question

I'm trying to place a navbar on the top of all of my pages. Here's the router:

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

Note the hash parameter in the Locations tag. When I use the router as such, the links in the <NavBar /> component don't use hashes. However, if I include <NavBar /> in each of my individual components, then the hash linking works as expected. Is there a single place where I can include the <NavBar /> such that it's rendered on all pages displayed by the router?

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