title: react-router switch not working as expected
body: <p>I'm learning react and got stuck at react-routes</p>
  
  <p>consider the following:</p>
  
  <pre><code>import React from "react";
  import { BrowserRouter, Route, Switch } from "react-router-dom";
  
  import HelloWorld from "./HelloWorld.jsx";
  
  const Root = () =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route path="/" exact component={HelloWorld} /&gt;
            &lt;Route component={NoMatch} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  };
  
  function NoMatch({ location }) {
    return (
      &lt;div&gt;
        &lt;h3&gt;
          No match found
        &lt;/h3&gt;
      &lt;/div&gt;
    );
  }
  
  export default Root;
  </code></pre>
  
  <p>on '/' this route, it renders <code>HelloWorld</code> component as expected but on other routes for examples <code>abc</code> it displays <code>Cannot GET /abc</code> instead of <code>No match found</code></p>