重定向到函数React Router Dom中的路由

Question

我有一个带有click事件的按钮，一旦用户成功登录，就会调用一个API来登录用户。我想将用户重定向到/overview。我不完全确定如何使用react-router-dom，我所看到的一切都与react-router和使用Class 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来解决这个问题。任何帮助将不胜感激。

Answer 1

由于LoginCard是Login的儿童组成部分，因此无法自动访问route props。您可以将Route更改为以下内容，并将history道具从Login传递到LoginCard：

<Route path="/login" component={Login} />

或者你可以使用withRouter HOC将route props注入LoginCard组件。

const LoginCard = props => {
  const loginService = new LoginService();

  const handleLogin = () => {
    loginService.login(email, password).then(response => {
      props.history.push("/overview");
    });
  };

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

export default withRouter(LoginCard);

Answer 2

如果您想要登录用户请同时查看privateRoute，它可以帮助您保护页面

请查看本教程以获取更多详细信息react auth tutorial click here

Answer 3

您可以在渲染方法中有条件地返回它

if(this.state.authenticated){
 return <Redirect to={{ pathname: '/overview' }} />
}

如果没有经过身份验证，请返回您的登录名ui

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