React-router: Question: handling browser back button

[morenoh149]

I'm developing for mobile so getting the back button working is pretty important.
I found you can detect it with

window.onpopstate

it's passed an event with the following format

Any ideas how I can hook this object up to react-routers state management? I think it'd be great to just call whatever code is called when a Link component is clicked.

[BerkeleyTrue]

in createClass spec using the navigation mixin

onBackButtonEvent:(e) => {
  e.preventDefault();
 this.goBack();
}

componentDidMount: () => {
  window.onpopstate = this.onBackButtonEvent;
}

[morenoh149]

awesome. goBack() didn't work for some reason so I went with transitionTo()
here's the code

var ChatRoom = React.createClass({
  mixins: [State, Navigation],

  onBackButtonEvent: function (e) {
    debug('handling back button press')
    e.preventDefault()
    this.transitionTo('chatrooms')
  },

  componentDidMount: function() {
    window.onpopstate = this.onBackButtonEvent
  },

  render: function() {
    return (
    // jsx
    )
  }
})

module.exports = ChatRoom

[codemilli]

In this document says, the popstate event is not cancellable.

Specification: HTML5
Interface: PopStateEvent
Bubbles: Yes
Cancelable: No
Target: defaultView
Default Action: None

[ccorcos]

window.onpopstate gets called when going forward as well

[probablycorey]

Do we still need to listen to window.onpopstate to handle pressing the back button in react-router? Or is there a different way to handle this now?

[viru9]

 componentDidUpdate(){
  window.onpopstate  = (e) => {
        //your code...
    }
  }

[morenoh149]

@probablycorey unless otherwise noted, it's the same