React Router v4 with multiple layouts

Question

I\'d like to render some of my routes within my public layout, and some other routes within my private layout, is there a clean way to do this?

Example that obviousl

Answer 1

UPDATE 2020

Well for now I'm following this approach, it's simpler that the one I posted before:

const Pages = () => {
  return (
    
      
        
        
          
            
              
                
              
              
                
              
              
                
              
              
                
              
              
                
              
              
                
              
              
              
            
          
        
      
    
  );
};

In this way, the MainLayout will take care of everything except for the coming soon page.

OLD ANSWER

If you are using Typescript and want to follow this react layout aproach then you can declare your layout like this:

import './Default.less';

import React from 'react';
import { Route } from "react-router-dom";

import { Sider } from './Components';
import { Notification } from 'Client/Components';

interface IDefaultProps {
  component: any
  path?: string;
  exact?: boolean;
}

const Default: React.SFC = (props) => {
  const { component: Component, ...rest } = props;
  return  (
    

      
      

        
      
      
    
  )} />
}

export default Default;

And declare routes like this:

import React from 'react';
import { Route } from 'react-router-dom';

import { DefaultLayout } from 'Client/Layout';
import { Dashboard, Matters, Schedules, Students } from './Containers';

export const routes = 

  
  
  
  
;