title: ReactJS: handling invalid dynamic links and rendering 404 error message
body: <p>App link: <a href="https://codesandbox.io/s/distracted-darwin-rq1ew?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/distracted-darwin-rq1ew?fontsize=14</a></p>
  
  <p>Similar question asked: <a href="https://stackoverflow.com/q/58023199/8738008">How to handle 404 in Reactjs dynamic pages based on Ajax response?</a></p>
  
  <p>I am fetching an API call and rendering only names from data to <code>Shop</code> component. Then providing a dynamic link to those name by providing id i.e. <code>/shop/:itemId</code>.</p>
  
  <p>Here I want to handle "page not found (404) error" when that <code>itemId</code> is wrong or if user type anything except valid id.</p>
  
  <pre><code>&lt;Router&gt;
    &lt;div className="App"&gt;
      &lt;Nav /&gt;
      &lt;Switch&gt;
        &lt;Route path="/" exact component={Main} /&gt;
        &lt;Route path="/about" exact component={About} /&gt;
        &lt;Route path="/contact" exact component={Contact} /&gt;
        &lt;Route path="/shop" exact component={Shop}&gt;
          &lt;Route path="/shop/:itemId" exact component={ItemDetails} /&gt;
          &lt;Route path="*" exact component={Error404} /&gt;
        &lt;/Route&gt;
        &lt;Route component={Error404} /&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>In above snippet everything works fine except for following part</p>
  
  <pre><code>&lt;Route path="/shop" exact component={Shop}&gt;
     &lt;Route path="/shop/:itemId" exact component={ItemDetails} /&gt;
     &lt;Route path="*" exact component={Error404} /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>Here when I go to path <code>/shop</code> or even <code>/shop/valid-id-OR-invalid-id</code> it's rendering <code>Error404</code> component only. How do I solve this issue?</p>
  
  <p>P.S.: If I remove <code>exact</code> then it works fine for paths like <code>/contac</code> or <code>/abou</code> it renders <code>Error404</code> component, only if you misspell the path name. But if I try <code>/contact/asdasdasdd</code> then it renders <code>Contact</code> component. Is there any other way to solve this?</p>