this.props.history.push()
есть проект на реакте, при нажатии кнопки logout должен произойти редирект на основную страницу "/"
App основной import React, { Component } from "react"; import { Router, Route, Switch, withRouter } from "react-router-dom"; import { createBrowserHistory } from "history"; import "./App.css"; import Header from "./Header.js"; import ListComponent from "./components/ListComponent"; import PostComponent from "./components/PostComponent"; import UserComponents from "./components/UserComponents"; const history = createBrowserHistory(); class App extends Component { state = { isLoggedIn: false }; handleIsLoggedInChanged = isLoggedIn => { this.setState({ isLoggedIn }); }; render() { const { isLoggedIn } = this.state; return ( <Router history={history}> <Header history={this.history} handleIsLoggedInChanged={this.handleIsLoggedInChanged} isLoggedIn={isLoggedIn} /> <Switch> <Route exact path="/" component={() => <ListComponent isLoggedIn={isLoggedIn} />} /> <Route path="/post/:id" component={PostComponent} isLoggedIn={isLoggedIn} /> <Route path="/user/:id" component={UserComponents} /> </Switch> </Router> ); } } export default App; Header где и находится кнопка handleBackClick import React, { Component } from "react"; import { withRouter } from "react-router-dom"; class Header extends Component { state = { isProcessing: false, userInfo: {}, email: null, password: null, error: null }; handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; handleBackClick = () => { const { handleIsLoggedInChanged, history } = this.props; handleIsLoggedInChanged(false); this.setState({ error: null }); console.log("back"); }; handleClick = e => { e.preventDefault(); const { email, password } = this.state; console.log("конопка работает"); const { isLoggedIn, handleIsLoggedInChanged } = this.props; console.log(email, password); if (isLoggedIn) { this.setState({ userInfo: {} }); handleIsLoggedInChanged(false); } else { this.setState({ isProcessing: true }); fetch("https://penpal.staging.tk/api/login", { method: "post", headers: { "Content-type": "application/json" }, body: JSON.stringify({ email, password }) }) .then(res => res.json()) .then(res => { if (res.status && res.status !== 200) { this.setState({ isProcessing: false, error: res.message }); } else { handleIsLoggedInChanged(true); this.setState({ userInfo: res.user, isProcessing: false }); } }) .catch(err => console.log(err)); } }; render() { const { isProcessing, error, history } = this.state; const { isLoggedIn } = this.props; return ( <div className="header"> {isProcessing && <div>Loading....</div>} <h3> {!isLoggedIn && ( <div> Введите имя и пароль <form onSubmit={this.handleClick} id="form"> Имя: <input onChange={this.handleChange} style={{ marginLeft: "34px" }} type="text" name="email" id="email" placeholder="enter your email" /> <br /> Пароль: <input onChange={this.handleChange} type="password" name="password" id="password" placeholder="enter your password" style={{ marginLeft: "5px" }} /> <br /> <input style={{ marginLeft: "210px" }} type="submit" value="login" /> </form> </div> )} <div className="checkText"> {isLoggedIn && "welcome " + this.state.userInfo.strLastName && ( <button to={`/`} onClick={this.handleBackClick}> logout </button> )} </div> <div className="error">{!isLoggedIn && error}</div> </h3> <div /> </div> ); } } export default Header; |
1) в App убрать 30 строку
2) export default withRouter(Header) 3) в handleBackClick дописать history.push('/') 4) в Header в 115 строке to не нужно |
Часовой пояс GMT +3, время: 22:05. |