[Solved]-React Router changes route but does not render the component-Reactjs

import { BrowserRouter } from 'react-router-dom';

const defaultRender = () => {
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById('root')
    );
};
defaultRender();

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import {Page1, Page2} from './pages';

const App = () => {
  return (
    <div className="App">
        <Switch>
          <Route exact path="/page1" component={Page1} />
          <Route exact path="/page2" component={Page2} />
        </Switch>
    </div>
  );
}

export default App;