使用react-router-dom的受保护页面不起作用

// AuthContext.js
import { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    // 登录逻辑
    setIsAuthenticated(true);
  };

  const logout = () => {
    // 登出逻辑
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// App.js
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';

const App = () => {
  return (
    <Router>
      <AuthProvider>
        <Route path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/protected" component={Protected} />
      </AuthProvider>
    </Router>
  );
};

// Protected.js
import { useContext } from 'react';
import { Redirect } from 'react-router-dom';
import { AuthContext } from './AuthContext';

const Protected = () => {
  const { isAuthenticated } = useContext(AuthContext);

  if (!isAuthenticated) {
    return <Redirect to="/login" />;
  }

  return <div>受保护的页面内容</div>;
};