title: Redirect after login React.js
body: <p>i've been trying since days to redirect my user after login to the home creating a callback function in my App.js and sending it as props to the login class component throught a loginregisterpage class component, but this doesn't work, can someone have a look on it and tell me what i;m missing out?
  Thank you my code look like this</p>
  <p>App.js</p>
  <pre><code>import React from 'react'
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
  import { HomePage } from './Pages/HomePage/HomePage'
  import { LoginRegisterPage } from './Pages/LoginRegisterPage/LoginRegisterPage'
  import 'bootstrap/dist/css/bootstrap.min.css'
  
  export class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authenticated: false,
      }
      this.handleSuccess = this.handleSuccess.bind(this);
  
    }
    handleSuccess = (data) =&gt; {
      this.props.history.push(&quot;/&quot;)
    }
  
    render() {
      return (
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;HomePage /&gt;
            &lt;/Route&gt;
            &lt;Route exact path=&quot;/login-register&quot;&gt;
              &lt;LoginRegisterPage onLoginSuccess={this.handleSuccess} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      )
    }
  }
  </code></pre>
  <p>LoginRegisterPage class component</p>
  <pre><code>class LoginPage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '',
              password: '',
              accessToken: '',
              authenticated: ''
          };
          this.handleChangeUsername = this.handleChangeUsername.bind(this);
          this.handleChangePassword = this.handleChangePassword.bind(this);
  
      }
  
      handleChangeUsername(event) {
          this.setState({
              username: event.target.value
          })
      }
  
      handleChangePassword(event) {
          this.setState({
              password: event.target.value
          })
      }
  
      handleClick(event) {
          var apiBaseUrl = &quot;https://myapi.com/auth/&quot;
          const payload = {
              method: &quot;POST&quot;,
              headers: {
                  'Content-Type': 'application/json; charset=utf-8'
              },
              body: JSON.stringify({
                  'username': this.state.username,
                  'password': this.state.password
              })
          };
          const { username, password } = this.state;
  
          if (username &amp;&amp; password) {
              fetch(apiBaseUrl + 'login', payload)
                  .then((response) =&gt; {
                      if (response.status === 200) {
                          alert(&quot;Logged In! You'll be redirected on Home&quot;)
                          return response.json()
                      } else {
                          return alert(&quot;wrong pass&quot;)
                      }
                  }).then((data) =&gt; {
                      this.setState({
                          accessToken: data.accestToken,
                          authenticated: data.authenticated
                      });
                      localStorage.setItem('accessToken', data.accessToken);
                      if (data.authenticated === true) {
                          console.log(this.props)
                          this.props.onLoginSuccess(data)
                      }
  
                  })
                  .catch((err) =&gt; console.log(err));
          } else {
              alert(&quot;Cannot be Empty&quot;)
          }
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className=&quot;form&quot;&gt;
                      &lt;div&gt;
                          &lt;div className=&quot;form-input&quot;&gt;
                              &lt;div &gt;
                                  &lt;div className=&quot;userData&quot;&gt;
                                      &lt;span&gt;
                                          &lt;img
                                              src={UserIcon}
                                          /&gt;
                                      &lt;/span&gt;
                                      &lt;input
                                          autocomplete=&quot;off&quot;
                                          type=&quot;text&quot;
                                          name=&quot;username&quot;
                                          placeholder=&quot;Username&quot;
                                          value={this.state.username}
                                          onChange={this.handleChangeUsername}
                                      /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;userData&quot;&gt;
                                      &lt;span&gt;
                                          &lt;img
                                              src={PasswordIcon}
                                          /&gt;
                                      &lt;/span&gt;
                                      &lt;input
                                          autocomplete=&quot;off&quot;
                                          type=&quot;password&quot;
                                          name=&quot;password&quot;
                                          placeholder=&quot;Password&quot;
                                          value={this.state.password}
                                          onChange={this.handleChangePassword}
                                      /&gt;
                                      &lt;p style={(this.state.username &amp;&amp; this.state.password) ? { display: 'none' } : { display: 'block' }}&gt; Must fill all the form!&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-footer&quot;&gt;
                      &lt;img
                          src={Btn}
                          onClick={(event) =&gt; this.handleClick(event)}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>LoginPage class component</p>
  <pre><code>class LoginPage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '',
              password: '',
              accessToken: '',
              authenticated: ''
          };
          this.handleChangeUsername = this.handleChangeUsername.bind(this);
          this.handleChangePassword = this.handleChangePassword.bind(this);
  
      }
  
      handleChangeUsername(event) {
          this.setState({
              username: event.target.value
          })
      }
  
      handleChangePassword(event) {
          this.setState({
              password: event.target.value
          })
      }
  
      handleClick(event) {
          var apiBaseUrl = &quot;https://movies-app-siit.herokuapp.com/auth/&quot;
          const payload = {
              method: &quot;POST&quot;,
              headers: {
                  'Content-Type': 'application/json; charset=utf-8'
              },
              body: JSON.stringify({
                  'username': this.state.username,
                  'password': this.state.password
              })
          };
          const { username, password } = this.state;
  
          if (username &amp;&amp; password) {
              fetch(apiBaseUrl + 'login', payload)
                  .then((response) =&gt; {
                      if (response.status === 200) {
                          alert(&quot;Logged In! You'll be redirected on Home&quot;)
                          return response.json()
                      } else {
                          return alert(&quot;wrong pass&quot;)
                      }
                  }).then((data) =&gt; {
                      this.setState({
                          accessToken: data.accestToken,
                          authenticated: data.authenticated
                      });
                      localStorage.setItem('accessToken', data.accessToken);
                      if (data.authenticated === true) {
                          console.log(this.props)
                          this.props.onLoginSuccess(data)
                      }
  
                  })
                  .catch((err) =&gt; console.log(err));
          } else {
              alert(&quot;Cannot be Empty&quot;)
          }
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className=&quot;form&quot;&gt;
                      &lt;div&gt;
                          &lt;div className=&quot;form-input&quot;&gt;
                              &lt;div &gt;
                                  &lt;div className=&quot;userData&quot;&gt;
                                      &lt;span&gt;
                                          &lt;img
                                              src={UserIcon}
                                          /&gt;
                                      &lt;/span&gt;
                                      &lt;input
                                          autocomplete=&quot;off&quot;
                                          type=&quot;text&quot;
                                          name=&quot;username&quot;
                                          placeholder=&quot;Username&quot;
                                          value={this.state.username}
                                          onChange={this.handleChangeUsername}
                                      /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;userData&quot;&gt;
                                      &lt;span&gt;
                                          &lt;img
                                              src={PasswordIcon}
                                          /&gt;
                                      &lt;/span&gt;
                                      &lt;input
                                          autocomplete=&quot;off&quot;
                                          type=&quot;password&quot;
                                          name=&quot;password&quot;
                                          placeholder=&quot;Password&quot;
                                          value={this.state.password}
                                          onChange={this.handleChangePassword}
                                      /&gt;
                                      &lt;p style={(this.state.username &amp;&amp; this.state.password) ? { display: 'none' } : { display: 'block' }}&gt; Must fill all the form!&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-footer&quot;&gt;
                      &lt;img
                          src={Btn}
                          onClick={(event) =&gt; this.handleClick(event)}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>