您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

React Router导航栏示例

React Router导航栏示例

是的,丹尼尔是正确的,但是要扩展他的答案,您的主应用程序组件将需要具有一个导航栏组件。这样,当渲染主应用程序(“ /”路径下的任何页面)时,它还将显示导航栏。我猜想您不希望您的登录页面显示导航栏,因此它不应该是嵌套的组件,而应该是单独的。因此,您的路线最终看起来像这样:

<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>
@H_502_4@

其他组件如下所示:

var NavBar = React.createClass({
  render() {
    return (
      <div>
        <ul>
          <a onClick={() => history.push('page1') }>Page 1</a>
          <a onClick={() => history.push('page2') }>Page 2</a>
        </ul>
      </div>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <NavBar />
        <div>Other Content</div>
        {this.props.children}
      </div>
    )
  }
});
@H_502_4@
其他 2022/1/1 18:15:44 有636人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶