title: React-Router nested routes loading blank page instead of loading inside parent component
body: <p>I am new to React and trying to create a layout with nested routes. Here's my scenario </p>
  
  <ul>
  <li>show Login      when URL is   /</li>
  <li>show Dashboard  when URL is   /dashboard</li>
  <li>show Profile    when URL is   /dashboard/profile   (this should load
  inside the dashboard content area)</li>
  </ul>
  
  <p><strong>The login page and dashboard page are loading properly when the URL is accessed in the browser but for /dashboard/profile, the browser goes to a blank page instead of loading it inside the dashboard component.</strong></p>
  
  <p>Index.js</p>
  
  <pre><code>ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
      &lt;/BrowserRouter&gt;, 
      document.getElementById('root'));
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div&gt;
          {/* &lt;Switch&gt; */}
            &lt;Route exact path='/' component={SignIn}/&gt;
            &lt;Route exact path='/dashboard' component={Dashboard}/&gt;
          {/* &lt;/Switch&gt; */}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Dashboard.js</p>
  
  <pre><code>class Dashboard extends React.Component {
  
    render() {
      const { classes } = this.props;
  
  return (
    &lt;React.Fragment&gt;
      &lt;CssBaseline /&gt;
      &lt;div className={classes.root}&gt;
        &lt;Header classes={classes} open={this.state.open} click={this.handleDrawerOpen} /&gt;
        &lt;Sidebar classes={classes} open={this.state.open} click={this.handleDrawerClose} /&gt;
        &lt;main className={classes.content}&gt;
          &lt;div className={classes.appBarSpacer} /&gt;           
  
          *********I expect profile component to load here 
  but when I access the URL /dashboard/profile I get a new blank page*********
  
          Route path="/dashboard/profile" exact component={Profile} /&gt;
  
  
  
        &lt;/main&gt;
      &lt;/div&gt;
    &lt;/React.Fragment&gt;
  );
    }
  }
  </code></pre>