title: react-router Basename also allows routes without basename
body: <p>I want my app to be served from a subdirectory , say localhost:3000/base , So that the routes page1 and page2 are served at localhost:3000/base/page1 and localhost:3000/base/page2</p>
  <p>I tried using basename in React Router for this.</p>
  <p>It works.</p>
  <p>However, just localhost:3000/page1 also matches the page1 component and same for page2.</p>
  <p>How do I prevent this from happening?</p>
  <pre><code>import React from &quot;react&quot;;
  import {
    BrowserRouter as Router,
    Route,
    Switch,
  } from &quot;react-router-dom&quot;;
  
  
  function App() {
    return (
      &lt;&gt;hi
      &lt;Router basename=&quot;/base&quot;&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/page1&quot; render={props =&gt; &lt;div&gt;Hello&lt;/div&gt;} /&gt;
          &lt;Route path=&quot;/page2&quot; render={props =&gt; &lt;div&gt;Hi&lt;/div&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
      &lt;/&gt;
    );
  }
  
  
  export default App;
  </code></pre>