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

将组件添加到每个reactJS组件

1 个答案: