Using multiple layouts for react-router components

Question

If I have the following:

  { /* Routes that use layout 1 */ }
  

        

Answer 1

Pintouch, I was able to get this working with the following example:

Layout1:

import React from 'react'

const Layout1 = (props) => (
    

        
Layout 1
        {props.children}
    
)

export default Layout1

Layout2:

import React from 'react'

const Layout2 = (props) => (
    

        
Layout 2
        {props.children}
    
)

export default Layout2

Layout Container:

import React from 'react'

const LayoutContainer = (props) => (
    

                {props.children}
    
)

export default LayoutContainer

Routes:

import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import LayoutContainer from './LayoutContainer'
import Layout1 from './Layout1'
import Layout2 from './Layout2'
import ContactManagerView from './ContactManagerView'
import CallerIdView from './CallerIdView'
import NotFound from './NotFound'