title: Not Found Page React Router V4
body: <p>I want to have a not found component on my routes</p>
  
  <pre><code>import React from 'react';
  import { Route, Switch } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import Home from './components/home';
  import MyWork from './components/work/myWork';
  import WorkShow from './components/work/workShow';
  import NavigationBar from './components/shared/navbar';
  import Footer from './components/shared/footer';
  import CategoryShow from './components/category/categoryShow';
  import PostIndex from './components/post/postIndex';
  import PostShow from './components/post/postShow';
  import PostSearch from './components/post/postSearch';
  import TagShow from './components/tag/tagShow';
  import NotFound from './components/shared/notFound';
  
  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.shape.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.shape.isRequired,
  });
  
  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={Home} /&gt;
      &lt;DefaultLayout path="/my-work" component={Work} /&gt;
      &lt;BlogLayout path="/blog" component={Blog} /&gt;
    &lt;/div&gt;
  );
  
  export default routes;
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code>const routes = (
        &lt;div&gt;
          &lt;DefaultLayout exact path="/" component={Home} /&gt;
          &lt;DefaultLayout path="/my-work" component={Work} /&gt;
          &lt;BlogLayout path="/blog" component={Blog} /&gt;
          &lt;BlogLayout path="*" component={NotFound} /&gt;
        &lt;/div&gt;
      );
  </code></pre>
  
  <p>But the NotFound component always renders, I only want this to render when the user enters an incorrect URL. How would I do this in react router v4?</p>