ReactJS基于子项

Question

我有一个CoreLayout组件，它具有基本布局元素：

1. Navigation bar
2. Components container
3. Footer

在导航栏中，我有一个子导航栏，可以独立显示每个组件 - 某些组件可能有一些操作按钮，有些组件根本不会有任何操作按钮。

IndexView会有一个动作（链接）到另一个页面，而ContactView不会显示其他导航栏。

路由器：

  <Route component={CoreLayout}>
    <Route path='/' component={LoginRequired}>
      <IndexRoute component={IndexView}/>
      <Route path='contact' component={ContactView}/>
    </Route>
  </Route>

当导航位于CoreLayout组件中时，如何为每个组件独立渲染导航？

我应该单独为每个视图加载导航和子导航吗？ 例如：

<Navigation><SubNavigation> list of links here </SubNavigation></Navigation>

Answer 1

两种app结构都可以工作：在CoreLayout根组件中使用导航栏，或在每个View组件中都有导航栏。

但我想在您的情况下，您宁愿在根组件（CoreLayout）中使用导航栏，因为您希望此组件定义应用程序的公共布局。为此，您可以使用CoreLayout组件中的路由器状态（当前显示的视图）来决定在导航栏中显示哪些链接。