为 react-router 组件使用多种布局 [英] Using multiple layouts for react-router components

问题描述

如果我有以下几点:

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

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

How can I make it so that the two sets of routes each use a different layout.

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

If I only had a single layout then I would put it in App, but in this case where do I define the layout?

为了使其更加复杂，一些布局组件(例如顶部导航)在两种布局类型之间共享.

To make it even more complicated some of the layout components (eg top nav) are shared between both layout types.

推荐答案

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

You can use routes without a path to define containers that are not defined by the 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>

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

The layout components can then import additional components such as the top nav

这篇关于为 react-router 组件使用多种布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！