如何在react中登录后重定向到另一个页面

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

// 登录页面组件
const LoginPage = () => {
  // 处理登录逻辑
  const handleLogin = () => {
    // 登录成功后，将登录状态保存在全局状态中
    // 这里使用了一个假设的登录状态变量 isAuthenticated
    // 实际项目中，你可能需要使用Context API或Redux来管理登录状态
    isAuthenticated = true;
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

// 私有路由组件
const PrivateRoute = ({ component: Component, ...rest }) => {
  // 检查用户是否已登录
  const isAuthenticated = false; // 这里使用了一个假设的登录状态变量
  // 实际项目中，你可能需要使用Context API或Redux来管理登录状态

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 另一个页面组件
const AnotherPage = () => {
  return <h2>Another Page</h2>;
};

// 应用组件
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/login" component={LoginPage} />
        <PrivateRoute path="/another" component={AnotherPage} />
      </div>
    </Router>
  );
};

export default App;