Using multiple layouts for react-router components

Question

If I have the following:

  { /* Routes that use layout 1 */ }
  

        

Answer 1

You could create a function RouteWithLayout that renders the wrapped within the layout:

const RouteWithLayout = ({ component: Component, layout: Layout, ...rest }) => (
   (
    
      
    
  )} />
)

const MainLayout = props => (
  

    
Main
    {props.children}
  
)

const AltLayout = props => (
  

    
Alt
    {props.children}
  
)

const Foo = () => (
  
Foo
)

const Bar = () => (
  
Bar
)

const App = () => (
  

    
      
      
    
  
)