Reactjs 为什么我的React App.js只在页面刷新时呈现3次

我不确定为什么App.js中的返回语句在页面刷新期间被调用3次.

My Index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import "assets/plugins/nucleo/css/nucleo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";

import { Auth0ProviderWithNavigate } from "./auth0-provider-with-navigate";
import { App } from "./app";
import store from "./app/store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Auth0ProviderWithNavigate>
      <Provider store={store}>
        {console.log("Hit from Index")}
        <App />
      </Provider>
    </Auth0ProviderWithNavigate>
  </BrowserRouter>
);

我的App.js

import { useAuth0 } from "@auth0/auth0-react";
import React, { useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import { AuthenticationGuard } from "./components/authentication-guard";
import Admin from "layouts/Admin.js";
import Auth from "layouts/Auth.js";

export const App = () => {
  const { isLoading } = useAuth0();

  useEffect(() => {
    console.log("Hit from App UseEffect");
  }, []);

  return (
    <>
      {console.log("Hit from App Return", isLoading)}{" "}
      {isLoading ? (
        <div className="page-layout">
          <Auth />
        </div>
      ) : (
        <Routes>
          <Route path="/" element={<Auth />} exact />
          <Route path="/auth/*" element={<Auth />} />
          <Route
            path="/admin/*"
            element={<AuthenticationGuard component={Admin} />}
          />
        </Routes>
      )}
    </>
  );
};

console.log results个

当我第一次通过登录加载页面时，App.js内的返回语句被调用2次(预期)，但是如果我刷新页面，它将被调用3次，而我预期是2次.