react-router Basename also allows routes without basename

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

I tried using basename in React Router for this.

It works.

However, just localhost:3000/page1 also matches the page1 component and same for page2.

How do I prevent this from happening?

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";


function App() {
  return (
    <>hi
    <Router basename="/base">
      <Switch>
        <Route path="/page1" render={props => <div>Hello</div>} />
        <Route path="/page2" render={props => <div>Hi</div>} />
      </Switch>
    </Router>
    </>
  );
}


export default App;