title: React Router v4 is rendering blank pages for child components in a React.js SPA
body: <p>We are embedding our React SPA into a website at a URL that is not the root. I'm having trouble setting up the routing so that it can preserve the path where the page first started.  For example, the app loads at mysite.com/c/{customerId}. Once I'm in the app and navigate to the settings page I would like the URL to be mysite.com/c/{customerId}/settings.</p>
  
  <p><strong>Question:</strong>
  Why do I get completely null pages rendered when clicking on my Links?</p>
  
  <p>Below is my current configuration, we are using Typescript, Webpack, React, and React-Router v4.</p>
  
  <p><strong>Entry file (index.tsx)</strong></p>
  
  <pre><code>ReactDOM.render(
  &lt;BrowserRouter&gt;
      &lt;Switch&gt;
          &lt;Route exact path='/c/:userId' component={App}/&gt;
      &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;
  , document.getElementById("root"));
  </code></pre>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>render() {
          return ( 
              &lt;div&gt;
                  &lt;Menu/&gt;
                  &lt;Sidebar/&gt;
                  &lt;ContentPage/&gt;
              &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p><strong>contentPage.tsx</strong></p>
  
  <pre><code>render() {   
      return (
             &lt;main className={styles.mainContent}&gt;
                 &lt;Switch&gt;
                      &lt;Route path='/c/:userId/settings' component={SettingsPage} /&gt;
                      &lt;Route path='/c/:userId/products' component={ProductPage}/&gt;
                 &lt;/Switch&gt;
             &lt;/main&gt;
      );
  }
  </code></pre>
  
  <p><strong>settingsPage.tsx</strong></p>
  
  <pre><code>export const SettingsPage = () =&gt; {
      return ( 
              &lt;Switch&gt;
                  &lt;Route path='/c/:userId/settings' component={SettingsMain}/&gt;
                  &lt;Route path='/c/:userId/settings/:gameId' component={GameEdit}/&gt;
                  &lt;Route path='/c/:userId/settings/:gameId/levels' component={LevelsEdit}/&gt;
              &lt;/Switch&gt;
  );
  </code></pre>
  
  <p><strong>sidebar.tsx (the location of the Link)</strong></p>
  
  <pre><code>&lt;Link to={`/c/${this.state.userId}/settings`} className={styles.sidebarItem}&gt;
                              &lt;i className={styles.sidebarIcon + " fa fa-cloud-upload"}&gt;&lt;/i&gt;&lt;br/&gt;
                              Settings
                      &lt;/Link&gt;
  </code></pre>
  
  <p><strong>Settings Main</strong></p>
  
  <pre><code>export class SettingsMain extends React.Component&lt;Props, State&gt; {
  
  public render() {
     return (
          &lt;div&gt;
             &lt;h4&gt;This is a Settings page&lt;/h4&gt;
         &lt;/div&gt;
  );
  </code></pre>
  
  <p>}  </p>