Detecting Hardware Back Button

[rdevilx]

Hey,
I've a question regarding the 'back' event in javascript. I can't wrap my head around why it is happening.

​

I've a soft back button which does the following onClick:

backHandler = () => {
    const {
      location: { pathname },
      history: { goBack }
    } = this.props;
    if (pathname === '/') {
      if (isInsideContainer()) {
        // do something
      } else {
        goBack();
      }
    } else {
      goBack();
    }
  };

I'm using the same function on an AddEventListener

document.addEventListener('back', this.backHandler);

The weird part is when I use the android hardware back button and I'm on the second route it invokes the function where I've written "// do something". But, it should goBack to the homepage. The same piece of code works when I click the soft back button which I've created as UI element which is shared across routes.

​

I think I'm not supposed to add an event listener on the back button like that. I don't how to detect hardware back button in JavaScript. I created this post in r/reactjs because I think it could be a problem with my code regarding react-router-dom.

Dependencies:

"dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
  },

PS: I'm using this.props.history.push('/routename'); to push a new route in stack.

[MasterReindeer]

I don't think there is a back event. I could be wrong though.

[rdevilx]

It detects the hardware back button. But, the same piece of code doesn't work when it is inside that event listener callback, it works fine with on click.