在反应路由器交换机中加载导航栏

时间:2018-12-29 21:15:06

标签: javascript reactjs

在有条件路由的情况下,如何始终将标头组件与其他组件一起加载

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_show_on_map"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_show_on_map_black_24dp"
        android:title="@string/action_show_on_map"
        />

    <item
        android:id="@+id/action_send_message"
        android:orderInCategory="200"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_send_message_black_24dp"
        android:title="@string/action_send_message"
        />

    <item
        android:id="@+id/action_send_command"
        android:orderInCategory="300"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_send_command_black_24dp"
        android:title="@string/action_send_command"
        />

    <item
        android:id="@+id/action_device_settings"
        android:orderInCategory="900"
        app:showAsAction="ifRoom|collapseActionView"
        android:icon="@drawable/ic_device_settings_black_24dp"
        android:title="@string/action_device_settings"
        />

</menu>

我希望标题组件始终呈现,然后使用开关呈现我的其他组件。

1 个答案:

答案 0 :(得分:2)

将开关放置在包含标题的组件内,类似

<Grid container alignItems='flex-start' className='route'>
  <Grid item align='center' className='logo' xs={12}>
    <Header />
  </Grid>
  <Grid item className='content' xs={12}>
    <Grid container>
      <Grid item xs={12}>
        <Switch>
          <Route exact path="/" render={() => <Home />} />
          <Route path="/products" render={() => <Product />} />
          <Route path="/company" render={() => <Company />} />
          <Route component={noMatch} />
        </Switch>
      </Grid>
    </Grid>
  </Grid>
</Grid>

路由器可以包裹它,或者您可以将其导出为组件并将其放置在路由器中另一个组件中