title: How to nest routes in React Router v4?
body: <p>Is there a way to nest routes in React Router v4?</p>
  
  <p>This works:</p>
  
  <pre><code>  &lt;Router basename='/app'&gt;
      &lt;main&gt;
        &lt;Route path='/' component={AppBar} /&gt;
        &lt;Route path='/customers' component={Customers} /&gt;
      &lt;/main&gt;
    &lt;/Router&gt;
  </code></pre>
  
  <p>This does not:</p>
  
  <pre><code>  &lt;Router basename='/app'&gt;
      &lt;Route path='/' component={AppBar}&gt;
        &lt;Route path='/customers' component={Customers} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  </code></pre>
  
  <p><strong>Customers Component:</strong></p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import styled from 'styled-components'
  
  export default class Customers extends Component {
    render () {
      return (
        &lt;Container&gt;
          &lt;h1&gt;Customers&lt;/h1&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  const Container = styled.section`
    height: 100%;
    padding: 15px;
    overflow: auto;
  `
  </code></pre>