Перенаправление на маршрут внутри функции React Router Dom

Question

У меня есть кнопка с событием щелчка, которая вызывает функцию, которая создает 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 (внутри компонента Login) с кнопкой и функцией с вызовом 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

Вы можете вернуть его условно в методе рендеринга , например

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

, и вернуть свой логин, если вы не авторизованы, как у вас

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

Answer 3

Если вы хотите, чтобы войти в систему пользователя, пожалуйста, также посмотрите в privateRoute, который поможет вам защитить вашу страницу

Пожалуйста, посмотрите этот урок для более подробной информации. Реакция на авторизацию Нажмите здесь