javascript - 为 react-router 组件使用多种布局

Question

如果我有以下情况:

<Route path="/" component={Containers.App}>

  { /* Routes that use layout 1 */ }
  <IndexRoute component={Containers.Home}/>
  <Route path="about" component={Containers.About}/>
  <Route path="faq" component={Containers.Faq}/>
  <Route path="etc" component={Containers.Etc}/>

  { /* Routes that use layout 2 */ }
  <Route path="products" component={Containers.Products}/>
  <Route path="gallery" component={Containers.Gallery}/>
</Route>

我怎样才能使两组路线各自使用不同的布局。

如果我只有一个布局，那么我会把它放在 App 中，但是在这种情况下，我在哪里定义布局呢？

更复杂的是，一些布局组件(例如顶部导航)在两种布局类型之间共享。

Answer 1

您可以使用没有路径的路由来定义 url 未定义的容器:

<Route path="/" component={Containers.App}>

  { /* Routes that use layout 1 */ }
  <Route component={Containers.Layout1}>
    <IndexRoute component={Containers.Home}/>
    <Route path="about" component={Containers.About}/>
    <Route path="faq" component={Containers.Faq}/>
    <Route path="etc" component={Containers.Etc}/>
  </Route>

  <Route component={Containers.Layout2}>
    { /* Routes that use layout 2 */ }
    <Route path="products" component={Containers.Products}/>
    <Route path="gallery" component={Containers.Gallery}/>
  </Route>
</Route>

然后布局组件可以导入其他组件，例如顶部导航