title: React Router - 404 page always showing due to custom route component
body: <p>I have a component which takes in similar props to the standard react-router <code>Route</code> and returns a route. This returned route has a render prop which just passes through the component but adds a nav component. This custom <code>NavRoute</code> does not work with the react-router <code>Switch</code> component, as when I use the custom component inside the switch along with a catch-all 404 page, the page always shows.</p>
  
  <p>How can I make the 404 component only show if none of the other routes match the url?</p>
  
  <p>NavRoute</p>
  
  <pre class="lang-js prettyprint-override"><code>const NavRoute = ({ exact, path, component: Component }) =&gt; {
    return (
      &lt;Route exact={exact} path={path} render={(props) =&gt; (
        &lt;div style={styleSideNav}&gt;
          &lt;Nav /&gt;
          &lt;Component {...props} /&gt;
        &lt;/div&gt;
      )}/&gt;
    );
  });
  </code></pre>
  
  <p>Usage</p>
  
  <pre class="lang-js prettyprint-override"><code>  &lt;Switch&gt;
      &lt;NavRoute exact path="/" component={Home} /&gt;
      &lt;NavRoute exact path="/about" component={About} /&gt;
      &lt;Route path="/" component={Page404} /&gt;
    &lt;/Switch&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong>
  Codesandbox of full example: <a href="https://codesandbox.io/s/react-router-stack-overflow-5jcum" rel="nofollow noreferrer">https://codesandbox.io/s/react-router-stack-overflow-5jcum</a>
  Url of codesandobx: <a href="https://5jcum.csb.app/invite/abc" rel="nofollow noreferrer">https://5jcum.csb.app/invite/abc</a></p>