Блог

Я пытаюсь разместить панель навигации в верхней части всех моих страниц. Вот маршрутизатор:

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

Обратите внимание на параметр hash в Locations теге. Когда я использую маршрутизатор как таковой, ссылки в <NavBar /> компоненте не используют хэши. Однако, если я включу <NavBar /> в каждый из моих отдельных компонентов, то связывание хэша будет работать так, как ожидалось. Есть ли хоть одно место, куда я могу включить <NavBar /> так, чтобы оно отображалось на всех страницах, отображаемых маршрутизатором?

Решается путем переключения маршрутизаторов с компонента react-router на 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);