How to nest routes in React Router v4?

Question

Is there a way to nest routes in React Router v4?

This works:

Answer 1

Best pattern I have found so far.

// main app

    // not setting a path prop, makes this always render
    
    
        
        
        
    

I can just keep nesting this inside a component and everything works nice including hmr(If using webpack, dont forget to set output.publicPath to "/")

// dashboard component

    // the same way as before, not setting a path prop
    // makes it render on every /dashboard/** request 
    
    
        // longer path (with same root) than others first