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;

[SuperZen]

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