Using multiple layouts for react-router components

Question

If I have the following:

  { /* Routes that use layout 1 */ }
  

        

Answer 1

I came across this question and found a solution that I want to share.

With react router v4 we could render the routes directly in your layout. Which is more readable and easy to maintain.

Layout

export class MainLayout extends React.PureComponent {
  render() {
    return (
      

        

        {this.props.children}
        

      
    );
  }
}

Mainlayout.propTypes = {
  children: PropTypes.node.isRequired,
}

Router

export default function App() {
  return (
    
      
        
          
          
        
      
      
        .... other paths
      
    
  );
}