title: React Router with a custom root and a base component
body: <p>I have an integrated React app (it's integrated into an existing Flask app) and the entry to the React app is not on the site's root. The first URL that fires the React app is the '/active-items'.</p>
  
  <p>However, other routes <em>do not</em> necessarily extend that path. Some of the routes are '/active-items/item/', while some are completely different, like '/item-selection'.</p>
  
  <p>With that in mind, I'm trying to set up my React Router to provide a base component for each of those routes. Basically, any route that fires should have the 'App' component as the base component, and inside App component I have '{props.children}'.</p>
  
  <p>I've tried several iterations of how the routes should look like, but with no luck.</p>
  
  <p>My latest iteration is this:</p>
  
  <pre><code>&lt;Router&gt;
    &lt;div&gt;
      &lt;Route path='/' component={App}&gt;
        &lt;Route path='active-items' component={ActiveItems} /&gt;
      &lt;/Route&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>App is rendered, but ActiveItems is not. Any ideas how should I approach this?</p>
  
  <p>EDIT: I'm using react-router-dom v4.0.0</p>