title: React router nested routes doesn't work
body: <p>My task is to open <code>Main products</code> on <code>/</code> and to open <code>Misc products</code> on <code>/misc</code> with same layout (header and footer), and to open <code>About</code> on <code>/about</code> with no layout</p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  
  import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom'
  
  const About = () =&gt; "About";
  const Error = () =&gt; "404";
  
  class AdvertsList extends React.Component {
      render() {
          let {match} = this.props;
  
          return (
              &lt;div className="container"&gt;
                  &lt;header&gt;Header&lt;/header&gt;
                  &lt;main&gt;
                      &lt;nav&gt;
                          &lt;Link to="/"&gt;Main products&lt;/Link&gt; #
                          &lt;Link to="/misc"&gt;Misc products&lt;/Link&gt; #
                          &lt;Link to="/about"&gt;About&lt;/Link&gt;
                      &lt;/nav&gt;
                      &lt;div className="content"&gt;
                          &lt;Switch&gt;
                              &lt;Route path="/" exact={true} render={() =&gt; "Main products"}/&gt;
                              &lt;Route path="/misc" render={() =&gt; "Misc products"}/&gt;
                              &lt;Redirect to="/" /&gt;
                          &lt;/Switch&gt;
                      &lt;/div&gt;
                  &lt;/main&gt;
                  &lt;footer&gt;Footer&lt;/footer&gt;
              &lt;/div&gt;
          )
      };
  }
  
  class App extends React.Component {
      render() {
          return (
              &lt;Router&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/" exact={true} component={AdvertsList}/&gt;
                      &lt;Route path="/about" component={About}/&gt;
                      &lt;Route path="*" component={Error}/&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  render(&lt;App/&gt;, document.querySelector("#app"));
  </code></pre>
  
  <p>And if <code>Main products</code> are opened on <code>/</code> and <code>/about</code> link works fine too, <code>/misc</code> link does not, despite all <code>exact</code> settings, <code>404</code> is returned, i can't access misc products.</p>