React router dom full page reload

Question

Я только что создал проект fre sh react с create-react-app . для навигации я использую response-router-dom в моем index.js файле. Я обернул компоненты App.js с и в App.js. Я использую компонент переключения для загрузки страниц на основе изменений в URL. он работает нормально, проблема в том, что он загружает всю страницу, когда я меняю URL-адрес с / auth на /, что является нежелательным поведением

Ниже приведен мой index.js файл

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter forceRefresh={false}>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

Ниже мой App.js файл

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import HomePage from "./pages/home";
import AuthPage from "./pages/auth";

function App() {
  return (
    <div className="App">
      <Switch>
        <Route path="/auth" render={(props) => <AuthPage {...props} />} />
        <Route path="/" exact render={(props) => <HomePage {...props} />} />
      </Switch>
    </div>
  );
}

export default App;

желаемое поведение заключается в том, что когда я изменяю URL-адрес в браузере с клавиатуры, он не должен перезагружать всю страницу. он должен просто перезагрузить div приложения в App.js