Perform action if window history for a site is empty

Question

I have a Component that works as follows.

export default class BackButton extends Component {
  back() {
    window.history.back()
  }
  render() {
    return (
      <Button
        icon={<ArrowLeft/>}
        onTouchTap={this.back.bind(this)}
      />
    )
  }
}

This works perfectly well, but there is an "edge case". If you pop from the stack enough, it might lead to being stuck at a certain state without being able to go back because the stack is empty. When that happens, I want to be able to perform some additional functionality and disable the back button.

<Button
  icon={<ArrowLeft/>}
  disabled={!hasMoreHistory}
  onTouchTap={this.back.bind(this)}
  onHistoryEmpty={() => callback ? callback() : Router.go('/')}
/>

Is there a way to do this with javascript?

Answer 1

Unfortunately as other SO question(s) point it out, there is no reliable way of telling whether you can go back in your browser history or not.

window.history.length

• does not contain a standardized value when you open up a fresh page(in chrome: 1, in IE: 0)
• might be > 0 in the case when you may go forward

window.history.previous - in most cases is undefined

See: How to check if the user can go back in browser history or not