Using multiple layouts for react-router components

Question

If I have the following:

  { /* Routes that use layout 1 */ }
  

        

Answer 1

Route's path property has accepted an array of strings for a while now. See https://github.com/ReactTraining/react-router/pull/5889/commits/4b79b968389a5bda6141ac83c7118fba9c25ff05

Simplified to match the question routes, but I have working multiple layouts essentially like this (using react-router 5):

  
    
      
        
          
          
        
      
    
    {/* Layout 1 is last because it is used for the root "/" and will be greedy */}
    
      
        
          
          
          
          
        
      
    
  

This solution prevents re-mounting the layouts on route changes, which can break transitions, etc.