Using multiple layouts for react-router components

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)