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.handleIsLoggedInChan ged}
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;

[SuperZen]

1) в App убрать 30 строку
2) export default withRouter(Header)
3) в handleBackClick дописать history.push('/')
4) в Header в 115 строке to не нужно