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

I tried Florians answer but that wasn't enough for me as react will create a separate instance of your Layout for each route, hence any navigation transitions like a tab sliding will be killed.

I'm hoping for a more elegant solution, but this has got my app working again with v4.

Define one Route pointing to a component that will decide what to wrap the route in

In AppWrap do something like the following

 var isPrivateLayout;
 for (var path of listOfPrivateLayoutPaths) {
   if (this.props.location.pathname == path) {
     isPrivateLayout= true;
   }
 }
 if (isPrivateLayout) {
   return 
        (routes)
      
 } else {
   return 
        (routes)
      ;
 }

Route Config maybe could be used for a cleaner representation of this, not sure.