title: React Router v4 path not matched issue
body: <p>I am trying to render a 404 page when a path which I enter in the URL doesn't exist.</p>
  
  <p>Here is my router.jsx:</p>
  
  <pre><code>const NotFoundLayout = () =&gt; (
    &lt;div&gt;&lt;h1&gt;Not Found&lt;/h1&gt;&lt;/div&gt;
  );
  
  const DefaultLayout = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest} render={matchProps =&gt; (
        &lt;div&gt;
          &lt;NavigationBar /&gt;
          &lt;div className="mainContent"&gt;
            &lt;Component {...matchProps} /&gt;
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      )}
    /&gt;
  );
  
  DefaultLayout.propTypes = ({
    component: PropTypes.func.isRequired,
  });
  
  const BlogLayout = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest} render={matchProps =&gt; (
        &lt;div&gt;
          &lt;NavigationBar path="blog" /&gt;
          &lt;div className="mainContent"&gt;
            &lt;Component {...matchProps} /&gt;
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      )}
    /&gt;
  );
  
  BlogLayout.propTypes = ({
    component: PropTypes.func.isRequired,
  });
  
  const HomePath = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/" component={Home} /&gt;
    &lt;/Switch&gt;
  );
  
  const NotFoundPath = () =&gt; (
    &lt;Switch&gt;
      &lt;Route component={NotFoundLayout} /&gt;
    &lt;/Switch&gt;
  );
  
  const Work = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/my-work" component={MyWork} /&gt;
      &lt;Route path="/my-work/:workName" component={WorkShow} /&gt;
    &lt;/Switch&gt;
  );
  
  const Blog = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/blog" component={PostIndex} /&gt;
      &lt;Route path="/blog/search" component={PostSearch} /&gt;
      &lt;Route exact path="/blog/:postName" component={PostShow} /&gt;
      &lt;Route path="/blog/category/:categoryName" component={CategoryShow} /&gt;
      &lt;Route path="/blog/tag/:tagName" component={TagShow} /&gt;
    &lt;/Switch&gt;
  );
  
  const routes = (
    &lt;div&gt;
      &lt;DefaultLayout exact path="/" component={HomePath} /&gt;
      &lt;DefaultLayout path="/my-work" component={Work} /&gt;
      &lt;BlogLayout path="/blog" component={Blog} /&gt;
      &lt;DefaultLayout component={NotFoundPath} /&gt;
    &lt;/div&gt;
  );
  
  export default routes;
  </code></pre>
  
  <p>The <code>NotFoundLayout</code> shows at the bottom of every component. How can I change this file so that it only shows when a path doesn't match?</p>