React router redirect - Cannot read property 'props' of undefined

Question

Can anyone help me understand what's going wrong here?

I'm trying to redirect to the login page after a signout.

Here's the code

import React, { Component } from "react";
import firebase from "../Firebase/firebase";
import { withRouter, Redirect } from "react-router-dom";

class Home extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }

  state = {};

  logout = e => {
    e.preventDefault();
    firebase
      .auth()
      .signOut()
      .then(
        function() {
          console.log("Signed Out");
          this.props.history.push("/login");
        },
        function(error) {
          console.error("Sign Out Error", error);
        }
      );
  };

  render() {
    return (
      <div align="center" className="container">
        <h1> Home page </h1>
        <br />
        <br />
        <h2>Hello: {this.state.user} </h2>
        <button
          className="btn btn-lg text-white"
          style={{ backgroundColor: "#B65DF3" }}
          onClick={this.logout}
        >
          Logout
        </button>
      </div>
    );
  }
}

export default withRouter(Home);

Here's the error message

TypeError: Cannot read property 'props' of undefined

I don't understand why it's not working as my login page which redirects here is the exact same and that works.

After `console.log('Signed Out');` can you put `console.log(this);` and tell what you see? This looks like a scoping issue. — Praveen Kumar Purushothaman, Mar 21 '19 at 14:52
Ahhh!!! It's the problem of using the anonymous function where the context of `this` is changed. — Praveen Kumar Purushothaman, Mar 21 '19 at 14:53
Replace `function()` with `() =>` for the firebase callback and it will work as expected. — Tholle, Mar 21 '19 at 14:55
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md - Ya, we should use arrow function and @praveen, we can also do this: as per the documents, you can just do `` or `` - This is just a suggestion. — Avanthika, Mar 21 '19 at 15:01
@Avanthika I thought it won't be possible in the constructor or in programming way. Thanks, that's new to me. But I am still not if this is possible by using inside JavaScript, where there's no JSX possible. — Praveen Kumar Purushothaman, Mar 21 '19 at 15:05

score 0 · Accepted Answer · answered Mar 21 '19 at 14:53

Your issue would be the anonymous function you pass .then. Try replacing it with fat arrows or something like:

  logout = (e) => {
        e.preventDefault();
        firebase.auth().signOut().then(this.handleResolve).catch(this.handleError)
    }

  handleResolve = () => {
    console.log('Signed Out');
    this.props.history.push('/login')
  }

  handleError = (error) => {
    console.error('Sign Out Error', error);
  }

React router redirect - Cannot read property 'props' of undefined

1 Answers1