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

使用react-router-dom V5在登录时重定向页面的方法如下：

首先，安装react-router-dom V5依赖包。可以使用npm或者yarn命令进行安装：

npm install react-router-dom@5

在应用的根组件中，引入react-router-dom的相关组件和方法：

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

创建需要重定向的组件，例如登录页面和主页组件：

import React from 'react';

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

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

在根组件中，使用Router组件包裹整个应用，并设置路由规则：

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

创建一个私有路由组件PrivateRoute，用于判断用户是否已登录，如果未登录则重定向到登录页面：

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

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

在登录页面中，当用户登录成功后，可以使用react-router-dom提供的history.push()方法进行重定向到主页：

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

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

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

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

通过以上步骤，就可以使用react-router-dom V5在登录时实现页面重定向的功能。当用户未登录时，访问主页会自动重定向到登录页面；当用户登录成功后，可以通过编程方式进行页面重定向。