如何使用react-router-dom V5在登录时重定向页面

npm install react-router-dom@5

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

import React from 'react';

const LoginPage = () => {
  // 登录逻辑
  return (
    // 登录表单
  );
};

const HomePage = () => {
  // 主页内容
  return (
    // 主页内容
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginPage} />
        <PrivateRoute path="/home" component={HomePage} />
      </Switch>
    </Router>
  );
};

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = // 判断用户是否已登录的逻辑，例如从localStorage中获取token进行验证

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

import { useHistory } from 'react-router-dom';

const LoginPage = () => {
  const history = useHistory();

  const handleLogin = () => {
    // 登录逻辑
    // 登录成功后重定向到主页
    history.push('/home');
  };

  return (
    // 登录表单和登录按钮
  );
};