title: 404 page in REACT
body: <p>I created the component <code>NotFound</code> and it works fine when I go to a page that doesn't exist. But the same page it's appearing in all my pages, not only the one that doesn't exist. This is the component:</p>
  
  <pre><code>import React from 'react'
  
  const NotFound = () =&gt;
    &lt;div&gt;
      &lt;h3&gt;404 page not found&lt;/h3&gt;
      &lt;p&gt;We are sorry but the page you are looking for does not exist.&lt;/p&gt;
    &lt;/div&gt;
  
  export default NotFound
  </code></pre>
  
  <p>And this is how I used it in the main page:</p>
  
  <pre><code>class MainSite extends Component {
    render () {
      return (
        &lt;div&gt;
          {/* Render nav */}
          &lt;Route path='/dashboard' component={Nav} /&gt;
          &lt;Route path='/retrospectives' component={Nav} /&gt;
          &lt;Route path='/users' component={Nav} /&gt;
          &lt;Route path='/projects' component={Nav} /&gt;
  
          {/* Dashboard page */}
          &lt;ProtectedRoute exact path='/dashboard' component={DashboardPage} /&gt;
  
          {/* Retrospectives page */}
          &lt;ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} /&gt;
  
          {/* Users page */}
          &lt;ProtectedRoute exact path='/users' component={UsersPage} /&gt;
  
          {/* Projects page */}
          &lt;ProtectedRoute exact path='/projects' component={ProjectsPage} /&gt;
  
          {/* Retrospective related pages */}
          &lt;Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} /&gt;
          &lt;Route exact path='/join-retrospective' component={JoinRetrospective} /&gt;
          &lt;ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} /&gt;
  
          {/* OnBoarding pages */}
          &lt;ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} /&gt;
          &lt;Route exact path='/auth-handler' component={AuthHandler} /&gt;
          &lt;Route exact path='/join-organization' component={JoinOrganization} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default MainSite
  </code></pre>
  
  <p>As you can see I use <code>&lt;Route path="*" component={NotFound} /&gt;</code> to create the 404 pages, but that component is appearing in every existing page as well. How can I fix this?</p>