title: Handling incorrect url in react router v5
body: <p>I wanted to show the Error page for the incorrect Url. Common way is to add a Route path (*) at the end.</p>
  <pre><code>&lt;Route path=&quot;/&quot; exact&gt; &lt;Home /&gt; &lt;/Route&gt;
  &lt;Route path=&quot;/:id&quot; /&gt; &lt;Content /&gt;&lt;/Route&gt;
  &lt;Route path=&quot;*&quot;&gt; &lt;ErrorPage /&gt;&lt;/Route&gt;
  </code></pre>
  <p>I need to do some validation like i need to see whether the id exists in my list of ids or not. Based on that i should render the </p>
  <p>Let say, user enters <code>www.example.com/**invalidId**</code>. In this case, Route format passes and renders the content component.. adding to i need to check the if the id exists in my list</p>
  <p>I have listed 2 ways below to achieve this result. <strong>what is the recommended way? or is there any better solution to this?</strong></p>
  <ol>
  <li><p>Do the id check in the<code>&lt;Content /&gt;</code> component and render it only if the id is valid else render the </p>
  </li>
  <li><p>Add a &quot;/error&quot; Route path- <code>&lt;Route path=&quot;/error&quot;&gt; &lt;Error /&gt;&lt;/Route&gt;</code> .
  Do the id check in content component, if the id is valid render the component else redirect to &quot;/error&quot; route path which in turn renders the error page component (one downfall in this method is, user entered incorrect url will be lost)</p>
  </li>
  </ol>