我有一个带有 click 事件的按钮，该按钮调用一个函数，该函数使 API 在用户成功登录后登录用户。我想将用户重定向到/overview. 我不完全确定如何使用react-router-dom，我所看到的所有内容都是react-router使用 aClass Based Component而不是Function Based Component我正在使用的。

下面是我的路线是如何设置的

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from "../../login/Login";
import Main from "../../main/Main";

const App = () => {

   return (
      <div className="App">
         <Router>
            <div className="App-container">
               <Route path={"/login"} component={() => <Login />} />
               <Route exact path={"/overview"} component={Main} />
            </div>
         </Router>
      </div>
   );

}

export default App;

这是我的 LoginCard 组件（内部登录组件），带有 api 调用的按钮和功能

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import Button from '../button/Button';
import LoginService from '../../api/LoginService';

const LoginCard = (props) => {

   const loginService = new LoginService();

   const handleLogin = () => {
      loginService.login(email, password)
         .then((response) => {
            // Want to redirect here?
         });
   }

   return (
      <div className="Login">
         <Button onClick={handleLogin}>Login</Button>
      </div>
   );
};

export default LoginCard;

这是我尝试过但没有通过查看其他线程的方法

<Redirect to="/overview"/> <Redirect to={{ pathname: '/overview' }} />

我也看到人们提到props.location或this.props.location两者都对我来说是未定义的。

试图添加

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
<Router history={history}>

在 App.js 和使用 history.push 但得到一个错误，说它不是一个函数。

所以不确定如何做到这一点？我宁愿只使用react-router-dom或通过Function Based Component. 任何帮助将不胜感激。