title: React-router not rendering the component
body: <p>I have a nested route that is not rendering the passed Component.</p>
  
  <p>In my app.js I have a router setup like this and all works perfectly</p>
  
  <pre><code>&lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Route exact path="/register" component={Register} /&gt;
            &lt;Route exact path="/" component={Login} /&gt;
            &lt;Switch&gt;
              &lt;PrivateRoute exact path="/dashboard" component={NavBar} /&gt;
            &lt;/Switch&gt;
            &lt;Switch&gt;
              &lt;PrivateRoute exact path="/dashboard" component={Drawer} /&gt;
            &lt;/Switch&gt;
            &lt;div className="Content"&gt;
              &lt;Switch&gt;
                &lt;PrivateRoute exact path="/dashboard" component={Dashboard} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>then I have a sidedrawer which has a NavLink like this and it redirects perfectly</p>
  
  <pre><code>&lt;NavLink to="/dashboard/table"&gt;
    &lt;Description className={classes.icon} /&gt;
  &lt;/NavLink&gt;
  </code></pre>
  
  <p>and then i also have in Dashboard.js a line like this</p>
  
  <pre><code>&lt;Switch&gt;
        &lt;Route
          exact
          path={`${this.props.match.url}/table`}
          component={DataTable}
        /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>when i click the Icon in the sidedrawer it should redirect to /dashboard/table and render the DataTable Component but it just redirects and it doesnt render anything.</p>