ReactJS -如果会话过期，则在登录页面上重定向

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

// 私有路由组件
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

// 应用主页面组件
const MainPage = () => {
  return <div>这是应用的主页面</div>;
};

// 登录页面组件
const LoginPage = ({ setIsAuthenticated }) => {
  const handleLogin = () => {
    // 登录逻辑，验证用户凭证等
    setIsAuthenticated(true);
  };

  return (
    <div>
      <h2>登录页面</h2>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Route path="/login" component={() => <LoginPage setIsAuthenticated={setIsAuthenticated} />} />
      <PrivateRoute
        path="/main"
        component={MainPage}
        isAuthenticated={isAuthenticated}
      />
    </Router>
  );
};

export default App;