Перенаправление на маршрут внутри функции React Router Dom
У меня есть кнопка с событием щелчка, которое вызывает функцию, которая заставляет 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. Любая помощь будет принята с благодарностью.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Поскольку 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);
Если вы хотите, чтобы это входило в систему, пожалуйста, также загляните в privateRoute, который поможет вам защитить вашу страницу.
Пожалуйста, посмотрите этот учебник для более подробной информации учебник по авторизации реагировать нажмите здесь
Вы можете вернуть его условно в своем методе оказывать, например
if (this.state.authenticated){
return <Redirect to = {{ pathname: '/overview' }} />
}
и верните свой пользовательский интерфейс для входа, если он не аутентифицирован, как у вас есть
return (
<div className = "Login">
<Button onClick = {handleLogin}>Login</Button>
</div>
);