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

Use the render prop of Route component, this will not unmount and mount your layout component on every route change. More details of how this works here.

Say you have two layout components Primary.js and Secondary.js

In your App.js render method, you simply return

   
      } />
      } />
   

To refine it further, you can also define a Higher order component layout component to wrap your page component with a layout. (Not tested)

 Secondary(Login)}