除了直接启动应用程序并导航到"/login"之外，你 * 可以 * 在应用程序的根组件中使用一个挂载useEffect钩子来手动重定向到"/login"。我真的建议实现受保护的路由，并将主"/"路由置于保护之下，这样未经验证的用户将自动重定向到"/login"。
创建受保护的经过身份验证和未经身份验证的路由组件。

import { Navigate, Outlet, useLocation } from 'react-router-dom';
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";
import { useAuth } from '../path/to/AuthContext'; // <-- you'll need to implement this, however it fits with the Azure authentication

const PrivateRoutes = () => {
  const location = useLocation();
  const { isAuthenticated } = useAuth();

  if (isAuthenticated === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return isAuthenticated 
    ? (
      <AuthenticatedTemplate>
        <Outlet />
      </AuthenticatedTemplate>
    )
    : <Navigate to="/login" replace state={{ from: location }} />;
}

const AnonymousRoutes = () => {
  const { isAuthenticated } = useAuth();

  if (isAuthenticated === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return isAuthenticated 
    ? <Navigate to="/" replace />
    : (
      <UnauthenticatedTemplate>
        <Outlet />
      </UnauthenticatedTemplate>
    );
}

Routers.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import { Login } from "./pages/Login";
import { AnonymousRoutes, PrivateRoutes } from '../components/auth';

function Routers() {
  return (
    <div className="Routers">
      <BrowserRouter>
        <Routes>
          <Route element={<PrivateRoutes />}>
            <Route path="/" element={<Home />} />
            <Route path="/Home" element={<Home />} /> 
            <Route path="/About" element={<About />} />
            <Route path="/Contact" element={<Contact />} />
          </Route>
          <Route element={<AnonymousRoutes />}>
            <Route path="/login" element={<Login />} />
          </Route>
        </Routes>
        <Outlet />
      </BrowserRouter>
    </div>
  );
}

App.tsx

import Routers from "./components/Routers";

function App() {
  return (
    <div>
      <Routers />
    </div>
  );
}