Multiple Layouts with React Router v4

Question

I\'m pulling my hair out trying to render multiple layouts with React Router v4.

For instance, I\'d like pages with the following paths to have layout 1:

<

Answer 1

None of the other answers worked so I came up with the following solution. I used the render prop instead of the traditional component prop at the highest level.

It uses the layoutPicker function to determine the layout based on the path. If that path isn't assigned to a layout then it returns a "bad route" message.

import SimpleLayout from './layouts/simple-layout';
import FullLayout from './layouts/full-layout';

var layoutAssignments = {
  '/': FullLayout,
  '/pricing': FullLayout,
  '/signup': SimpleLayout,
  '/login': SimpleLayout
}

var layoutPicker = function(props){
  var Layout = layoutAssignments[props.location.pathname];
  return Layout ?  : 
bad route
;
};

class Main extends React.Component {
  render(){
    return (
      
        
      
    );
  }
}

simple-layout.js and full-layout.js follow this format:

class SimpleLayout extends React.Component {
  render(){
    return (
      

        
        
      
    );
  }
}