Different Layout - React Router v4

Viewed 1889

I want to have one layout for a set of paths, and another layout for another set of paths. Here is my route.jsx:

import React from 'react';                                                                          
import { Route, Switch } from 'react-router-dom';                                                   
import Main from './components/main';                                                               
import Home from './components/home';                                                               
import MyWork from './components/work/myWork';                                                      
import WorkShow from './components/work/workShow';                                                  

const DefaultLayout = ({ children }) => (                                                           
  <div>                                                                                             
    <Main children={children} />                                                                    
  </div>                                                                                            
);                                                                                                  

const Work = () => (                                                                                
  <Switch>                                                                                          
    <Route exact path="/my-work" component={MyWork} />                                              
    <Route path="/my-work/:workName" component={WorkShow} />                                        
  </Switch>                                                                                         
);                                                                                                  

const routes = (                                                                                    
  <DefaultLayout>                                                                                   
    <Switch>                                                                                        
      <Route exact path="/" component={Home} />                                                     
      <Route path="/my-work" component={Work} />                                                    
    </Switch>                                                                                       
  </DefaultLayout>                                                                                  
);                                                                                                  

export default routes; 

How would I add another router with a layout of BlogLayout, for example:

<BlogLayout>
  <Switch>
    <Route path="/blog" component={Blog} />
  </Switch>
</BlogLayout>
1 Answers
Related